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

我的问题是：如何使其工作反之亦然，即当孩子检查时，父母也应该被检查，如果没有孩子被检查，父母也应该取消检查

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

<强>更新

如果你想要，如果只取消选中最后一个子复选框，那么应该取消选中paremt然后你可以这样做： -

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

Answer 2

您需要有一些方法对子项和父项进行分组，以便您可以找到相对于子项复选框的父复选框。一旦你实现了这一目标，你就可以对复选框进行检查，看看你是否需要做任何事情。

＆＃13;

$(document).on('click', 'input.child', function() {
  var parent = $(this).closest('.typeContainer').find('input.parent'),
    parentChecked = parent.is(':checked');
  if ($(this).is(':checked') && !parentChecked) { // If the child is checked but the parent is not
    parent.prop('checked', true);
  } else if (!$(this).is(':checked') && parentChecked) { // Else if the child is not checked and the parent is
    var doUncheck = true;
    $(this).closest('ul').find('input.child').not(this).each(function() { // Loop through all the sibling children checkboxes
      if ($(this).is(':checked')) { // If one of them is checked
        doUncheck = false; // Don't uncheck the parent
        return; // Exit loop because required parameters are complete
      }
    });
    if (doUncheck) {
      parent.prop('checked', false);
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="typeContainer">
  <li>
    <input type="checkbox" class="parent" />Parent 1
  </li>
  <li>
    <ul>
      <li>
        <input type="checkbox" class="child" />Child 1.1
      </li>
      <li>
        <input type="checkbox" class="child" />Child 1.2
      </li>
      <li>
        <input type="checkbox" class="child" />Child 1.3
      </li>
      <li>
        <input type="checkbox" class="child" />Child 1.4
      </li>
    </ul>
  </li>
</ul>

<ul class="typeContainer">
  <li>
    <input type="checkbox" class="parent" />Parent 2
  </li>
  <li>
    <ul>
      <li>
        <input type="checkbox" class="child" />Child 2.1
      </li>
      <li>
        <input type="checkbox" class="child" />Child 2.2
      </li>
      <li>
        <input type="checkbox" class="child" />Child 2.3
      </li>
      <li>
        <input type="checkbox" class="child" />Child 2.4
      </li>
    </ul>
  </li>
</ul>

＆＃13;

如何更新父复选框是否已检查其子项？

2 个答案: