Question

最近我创建了这个动态复选框，并在C＃MVC Razor视图中显示它们。

<ul>
    @for (int i = 0; i < Model.sites.Count; i++)
    {
        <li>
            @Html.CheckBoxFor(m => m.sites[i].IsCheck)
            @Html.LabelFor(m => m.sites[i].IsCheck, Model.sites[i].SiteName)
            @Html.HiddenFor(m => m.sites[i].SiteId)
            @Html.HiddenFor(m => m.sites[i].SiteName)
        </li>
        for (int j = 0; j < Model.sites[i].Roomz.Count; j++)
        {
            @Html.CheckBoxFor(m => m.sites[i].Roomz[j].IsCheck)
            @Html.LabelFor(m => m.sites[i].Roomz[j].IsCheck, Model.sites[i].Roomz[j].RoomName)
            @Html.HiddenFor(m => m.sites[i].Roomz[j].RoomId)
            @Html.HiddenFor(m => m.sites[i].Roomz[j].RoomName)
        }
    }
</ul>

图片下方的

是复选框的显示

如何使用jquery检查sites.ischeck以检查相同网站下的所有子项目？示例检查CO2也将检查1号和2号套房

Answer 1

修改html，以便您可以使用相对选择器，包括在复选框中添加类名。

<ul>
    @for (int i = 0; i < Model.sites.Count; i++)
    {
        <li>
            @Html.CheckBoxFor(m => m.sites[i].IsCheck, new { class = "parent" })
            @Html.LabelFor(m => m.sites[i].IsCheck, Model.sites[i].SiteName)
            @Html.HiddenFor(m => m.sites[i].SiteId)
            @Html.HiddenFor(m => m.sites[i].SiteName)
            <div> // suggest you style this to give a margin-left so its indented relative to the parent
                for (int j = 0; j < Model.sites[i].Roomz.Count; j++)
                {
                    @Html.CheckBoxFor(m => m.sites[i].Roomz[j].IsCheck, new { class = "child" })
                    @Html.LabelFor(m => m.sites[i].Roomz[j].IsCheck, Model.sites[i].Roomz[j].RoomName)
                    @Html.HiddenFor(m => m.sites[i].Roomz[j].RoomId)
                    @Html.HiddenFor(m => m.sites[i].Roomz[j].RoomName)
                }
            <div>
        </li>
    }
</ul>

然后，您可以处理“父母”的.change()事件。复选框并获取“孩子”＃39;同一个<li>元素

中的复选框

$('.parent').click(function() {
    var isChecked = $(this).is(':checked');
    var children = $(this).closest('li').find('.child');
    $.each(children, function(index, item) {
        $(this).prop('checked', isChecked);
    });
});

您可能还想要处理子复选框，这样如果您取消选中任何子项，父项也将被取消选中，或者如果您检查子项，并且还检查了所有子项，则父项将被检查。

$('.child').click(function () {
    var parent = $(this).closest('li').find('.parent');
    var isChecked = $(this).is(':checked');
    if (!isChecked) {
        // the parent must be unchecked
        parent.prop('checked', false);
    } else {
        // check if all siblings have the same checked status
        var siblings = $(this).siblings('.child');
        var total = siblings.length;
        var matches = siblings.filter(function () {
            return $(this).prop('checked') == isChecked;
        }).length;
        if (matches === total) {
            parent.prop('checked', isChecked);
        }
    }
})

Answer 2

我认为你这样做是错误的。而不是这个你可以使用这个代码：

    <ul>
@for (int i = 0; i < Model.sites.Count; i++)
{
    <li>
        @Html.CheckBoxFor(m => m.sites[i].IsCheck)
        @Html.LabelFor(m => m.sites[i].IsCheck, Model.sites[i].SiteName)
        @Html.HiddenFor(m => m.sites[i].SiteId)
        @Html.HiddenFor(m => m.sites[i].SiteName)
          <ul>
               for (int j = 0; j < Model.sites[i].Roomz.Count; j++)
              {
                <li>
                   @Html.CheckBoxFor(m => m.sites[i].Roomz[j].IsCheck)
                   @Html.LabelFor(m => m.sites[i].Roomz[j].IsCheck,Model.sites[i].Roomz[j].RoomName)
                   @Html.HiddenFor(m => m.sites[i].Roomz[j].RoomId)
                   @Html.HiddenFor(m => m.sites[i].Roomz[j].RoomName)

               </li>
              }    

         </ul>
      </li>

    }
     </ul>

现在编写此代码以在复选框更改时选择子类别：

    $('input[type="checkbox"]').change(function(){
      if($(this).prop('checked')==true)
        {
          if($(this).find('ul').length>0)//check if child is present or not
            {
              $(this).find('ul li input[type="checkbox"]').each(function(){
                 $(this).prop('checked',true);
             });

            }


         }



    });

Jquery检查MVC视图中的所有动态复选框列表

2 个答案: