javascript - 在 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);
  })
})

这是一个演示检查和取消检查的工作 fiddle :

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

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