Селектор jQuery для "Html.CheckBoxFor"

Question

Есть ли способ использовать asp.net/jquery для переключения видимости div при использовании флажка, подобного этому:

<%: Html.CheckBoxFor(m => m.Type) %>

Я знаю, как выполнить часть jQuery, ноЯ не уверен, как определить, был ли выбран или изменен флажок.Есть ли какое-то onChange или onClick, которые я могу добавить к этому?

РЕДАКТИРОВАТЬ - Позвольте мне немного изменить это ... КАК я могу назначить идентификатор для Html.CheckBoxFor () ??

Answer 1

Вы можете подписаться на событие .change() и .toggle() видимость div в зависимости от того, установлен флажок или нет:

$(function() {
    $('#mycheckbox').change(function() {
        var isChecked = $(this).is(':checked');
        $('#someDivId').toggle(isChecked);
    });
});

И вы можете увидеть это в действии здесь .

Чтобы установить этот флажок, вы можете назначить ему уникальный идентификатор:

<%: Html.CheckBoxFor(m => m.Type, new { id = "mycheckbox" }) %>

или класс:

<%: Html.CheckBoxFor(m => m.Type, new { @class = "check" }) %>

, а затем адаптируйте селектор jQuery.

Answer 2

См. Этот вопрос: получить сгенерированный клиент для поля формы , это мой ответ:

Я использую этот помощник:

public static partial class HtmlExtensions
{
    public static MvcHtmlString ClientIdFor<TModel, TProperty>(
        this HtmlHelper<TModel> htmlHelper, 
        Expression<Func<TModel, TProperty>> expression)
    {
        return MvcHtmlString.Create(
              htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(
                  ExpressionHelper.GetExpressionText(expression)));
    }
}

Используйте его простокак и любой другой помощник: @ Html.ClientIdFor (model => model.client.email)

или в сценарии:

$(function() {
    $('#@Html.ClientIdFor(m=>m.Type)').change(function() {
        // Do stuff
    });
});

Answer 3

Да, для большинства элементов html существует событие onclick / onchange.

Предположим, что у вашего флажка есть id = "checkbox1", вы можете сделать следующее

var myCheckBox = document.getElementById("checkbox1");
myCheckBox.addEventListener('change', function(){do something}, false);