javascript - 如何通过是否选中子项来更新父复选框？

Question

我的代码工作正常，以防我选中主复选框，所有子复选框也被选中，但是当我先单击子复选框时，父复选框没有被选中。
这是我的 asp.net webforms 代码

<table id="dtPage" class="table  table-striped table-hover ">
  <thead>
    <tr>                                 
      <th><asp:CheckBox ID="chkActiveUsers" runat="server" ClientIDMode="Static" />Associate</th>
    </tr>
  </thead>
  <tbody>
   </HeaderTemplate>
     <ItemTemplate>
       <tr>
         <td>
            <asp:CheckBox ID="chkUserStatus" CssClass="enable-user" runat="server" />

         </td>
       </tr>

这是我的 JavaScript:

  $(document).ready(function () {


        $('#chkActiveUsers').click(function () {

            $(".enable-user input[type='checkbox']").prop('checked', $(this).is(':checked'));
        });
    });

我的问题是:我怎样才能使它反之亦然，即当 child 被检查时， parent 也应该被检查，而当没有 child 被检查时， parent 也应该被取消检查

Answer 1

您可以简单地为您的子复选框编写一个事件处理程序，并比较选中的长度和现有复选框的总长度，如下所示:-

$('input[name$="chkUserStatus"]').click(function () {
   if ($('input[name$="chkUserStatus"]').length == $('input[name$="chkUserStatus"]:checked').length) 
         $('#chkActiveUsers').prop('checked', true);
   else 
         $('#chkActiveUsers').prop('checked', false);
});

更新:

如果您希望只取消选中最后一个子复选框，那么应该取消选中该参数，那么您可以这样做:-

$('input[name$="chkUserStatus"]').click(function () {
   if ($('input[name$="chkUserStatus"]:checked').length != 0) 
         $('#chkActiveUsers').prop('checked', true);
   else 
         $('#chkActiveUsers').prop('checked', false);
});