在 C# MVC 中检查所有子项时未选中 Jquery 复选框

Question

您好，我在这里有这个循环，它生成从站点到楼层到房间的复选框，当我检查站点时，所有楼层都被选中，但如果我手动检查所有楼层但站点复选框未选中，则相反。请帮助纠正我的错误

<div class="form-group ">
  <ul id="siterecord">
    @for (int i = 0; i < Model.SASites.Count; i++)
    {
      @*Generate the sites*@
      <li>
        @Html.CheckBoxFor(m => m.SASites[i].IsCheck, new { @class = "parent" })
        @Html.LabelFor(m => m.SASites[i].IsCheck, Model.SASites[i].SiteName)
        @Html.HiddenFor(m => m.SASites[i].SiteId)
        @Html.HiddenFor(m => m.SASites[i].SiteName)
        @*Generate the floors for each site*@
        @for (int j = 0; j < Model.SASites[i].SAFloors.Count; j++)
        {
          <div style="margin-left:50px; clear:both;">
            <label>Floor @Model.SASites[i].SAFloors[j].FloorName</label>
          </div>
          <br />
          <div style="margin-left:20px;">
            <ul class="suiterecord">
              @for (int k = 0; k < Model.SASites[i].SAFloors[j].SARooms.Count; k++)
              {
                <li style="float:left;">
                  @Html.CheckBoxFor(m => m.SASites[i].SAFloors[j].SARooms[k].IsCheck, new { @class = "child chkboxCss" })
                  <div class="ARSLabel">
                    @Html.LabelFor(m => m.SASites[i].SAFloors[j].SARooms[k].IsCheck, Model.SASites[i].SAFloors[j].SARooms[k].RoomName)
                    @Html.HiddenFor(m => m.SASites[i].SAFloors[j].SARooms[k].RoomId)
                    @Html.HiddenFor(m => m.SASites[i].SAFloors[j].SARooms[k].RoomName)
                  </div>
                </li>
                if ((k + 1) % 5 == 0)
                {
                  @Html.Raw("</ul><div style='clear:both'></div><br><ul class='suiterecord'>");
                }
              }
            </ul>
            <div style='clear:both'></div><br>
          </div>
        }
      </li>
    }
  </ul>
</div>

jQuery 脚本

<script>
$('.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);
        }
    }
})

我的代码现在可以正常检查父项，所有子项都已检查。但它并没有以相反的方式工作，即检查所有未检查父母的孩子

输出 enter image description here

Answer 1

您可以简单地选中所有复选框并使用.prop('checked', false) 取消选中它们。例如：

$(document).ready(function(){
    $(document).on('click', 'input#all', function(){
    var isChecked = $('input#all:checked').length > 0 ? true : false;
    $('.rooms').find('.rcb').prop('checked', isChecked);
  })
})

这是一个演示 checking 和 unchecking 的工作小提琴：

https://jsfiddle.net/94d0f6m0/1/

此外，如果您在 DOM 加载后生成复选框，则最好使用 .on 而不是直接使用 .click，以确保您的代码还监视在它之后动态添加到 DOM 的复选框元素已加载。

Answer 2

据我了解，您想在检查父级时检查所有子级，并在检查所有子级时检查父级。

也许我开发的这个小提琴可以帮到你：

https://jsfiddle.net/xcbq4nb1/2/

它的作用是在选择所有子项时检查父项，但反之则不检查（即，如果取消选择所有子项，则仍选择父项，这是故意完成的，但您可以调整它，因为它取决于您正在使用的上下文）。此外，当您选中/取消选中父级时，所有子级都会选中/取消选中它（这也是可调整的）。

代码如下:)

$(document).ready(function() {
    $(".parent > div >input").click(function() {
    $(this).closest(".parent").find(".children input[type=checkbox]").prop("checked",$(this).is(":checked"));
  });

  $(".children li > input").click(function(event) {
    var parent = $(this).closest(".parent");
    var chldContainer = parent.find(".children");
    var checkedChildren = chldContainer.find("li input[type=checkbox]:not(:checked)").length;
    if (checkedChildren == 0 && parent.find("input").is(":not(:checked)")) {
        $(this).closest(".parent").find("div > input").prop("checked", true);
    } 
  });
});

希望对你有帮助。

Answer 3

试试这个简单的功能

$('.child').click(function () {
   var parent = $(this).closest('li');//get the parent
   var all = parent.find('.child').length;//get all childs
   var allChecked = parent.find('.child:checked').length;//get all checked
    parent.find('.parent').prop('checked', false);//uncheck
  if(all == allChecked) {
   parent.find('.parent').prop('checked', true);//check if all are checked
  }
})