“Html.CheckBoxFor”的 jQuery 选择器

Posted 2023-03-05

【中文标题】“Html.CheckBoxFor”的 jQuery 选择器

【英文标题】：jQuery Selector For "Html.CheckBoxFor"

【发布时间】：2011-11-07 23:18:00

【问题描述】：

当使用这样的复选框时，有没有办法使用 asp.net/jquery 来切换 div 的可见性：

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

我知道如何执行 jQuery 部分，但我不确定如何确定该框是否已被单击或更改。我可以添加某种 onChange 或 onClick 吗？

编辑 - 让我稍微改变一下...我如何为 Html.CheckBoxFor() 分配一个 id？？

【问题讨论】：

我认为复选框的 id 将自动设置为创建它的对象属性。所以在上面的例子中它会是'id="Type"'。您可以随时查看代码创建的标记以进行仔细检查。

【参考方案1】：

您可以根据复选框是否被选中来订阅.change() 事件和.toggle() div 的可见性：

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

你可以see it in action here。

要识别此复选框，您可以为其分配一个唯一 ID：

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

或一个类：

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

然后调整你的 jQuery 选择器。

【讨论】：

我的意思是如何为复选框分配 ID？我在 ASP.Net 中使用 CheckBoxFor，但不确定如何设置 id。

@Doctor Oreo，默认情况下 Html.CheckBoxFor 助手分配一个 id。它将从您的视图模型对象层次结构中的 lambda 表达式中推断出来。因此，如果我们处于 0 级，它将是id="Type"。您当然可以通过使用 CheckBoxFor 帮助器的适当重载来自定义它，如我更新的答案中所示。

由于某种原因，我必须选中该框并取消选中它才能注册 function()。

@Doctor Oreo，更改事件（顾名思义）仅在复选框的值更改时触发。

【参考方案2】：

是的，大多数 html 元素都有一个 onclick/onchange 事件。

假设您的复选框有一个 id="checkbox1"，您可以执行以下操作

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

【讨论】：

我的意思是如何为复选框分配 ID？我在 ASP.Net 中使用 CheckBoxFor，但不确定如何设置 id。

【参考方案3】：

看到这个问题：get the generated clientid for a form field，这是我的答案：

我使用这个助手：

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
    );
);