javascript - 取消选中 "Check all"复选框

Question

我制作了一个在行开头有复选框的表格。我还制作了一个“全部选中”复选框。当“选中”该复选框时，表上的所有其他复选框都将被选中。效果很好。但是，当我“取消选中”表格上的一个复选框时，“全部选中”复选框仍处于“选中”状态。当其他复选框之一发生更改时，如何取消选中它？

我的代码在这里:

脚本:

$('#chkall').change(function() {
var checkboxes = $(this).closest('table').find(':checkbox');
if($(this).is(':checked')) {
    checkboxes.prop('checked', true);
} else {
    checkboxes.prop('checked', false);
}
});

表格(html):

<table class="table table-hover">
                <tr>
                    <th><input type ="checkbox" id = "chkall"></th>
                    <th>Type</th>
                    <th>Brand</th>
                    <th>Description</th>
                    <th>Serial No</th>
                    <th>Asset No</th>
                    <th>Date of Purchased</th>
                    <th>Warranty Expiration</th>
                    <th>Status</th>
                </tr>

                <tr>
                    <td><input type ="checkbox"></td>
                    <td>Keyboard</td>
                    <td>HP</td>
                    <td>One time use keyboard</td>
                    <td>123456</td>
                    <td>789456</td>
                    <td>July 5, 2019</td>
                    <td>August 6, 2015</td>
                    <td>Available</td>
                </tr>

                <tr>
                    <td><input type ="checkbox"></td>
                    <td>Keyboard</td>
                    <td>HP</td>
                    <td>One time use keyboard</td>
                    <td>123456</td>
                    <td>789456</td>
                    <td>July 5, 2019</td>
                    <td>August 6, 2015</td>
                    <td>Available</td>
                </tr>

                <tr>
                    <td><input type ="checkbox"></td>
                    <td>Keyboard</td>
                    <td>HP</td>
                    <td>One time use keyboard</td>
                    <td>123456</td>
                    <td>789456</td>
                    <td>July 5, 2019</td>
                    <td>August 6, 2015</td>
                    <td>Available</td>
                </tr>

                <tr>
                    <td><input type ="checkbox"></td>
                    <td>Keyboard</td>
                    <td>HP</td>
                    <td>One time use keyboard</td>
                    <td>123456</td>
                    <td>789456</td>
                    <td>July 5, 2019</td>
                    <td>August 6, 2015</td>
                    <td>Available</td>
                </tr>

                <tr>
                    <td><input type ="checkbox"></td>
                    <td>Keyboard</td>
                    <td>HP</td>
                    <td>One time use keyboard</td>
                    <td>123456</td>
                    <td>789456</td>
                    <td>July 5, 2019</td>
                    <td>August 6, 2015</td>
                    <td>Available</td>
                </tr>
</table>

Answer 1

尝试比较复选框的数量与选中的复选框的数量

$('table').on('change', ':checkbox:not(#chkall)', function(){
   var checkboxes = $(this).closest('table').find(':checkbox:not(#chkall)'),
       allchecked = (checkboxes.length === checkboxes.filter(':checked').length);

   $('#chkall').prop('checked', allchecked);
});

如果您手动选中单个复选框，此代码还将启用全选

<小时/>

完整示例

$('#chkall').change(function() {
  var checkboxes = $(this).closest('table').find(':checkbox');
  if ($(this).is(':checked')) {
    checkboxes.prop('checked', true);
  } else {
    checkboxes.prop('checked', false);
  }
});

$('table').on('change', ':checkbox:not(#chkall)', function() {
  var checkboxes = $(this).closest('table').find(':checkbox:not(#chkall)'),
    allchecked = (checkboxes.length === checkboxes.filter(':checked').length);

  $('#chkall').prop('checked', allchecked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table class="table table-hover">
  <tr>
    <th>
      <input type="checkbox" id="chkall">
    </th>
    <th>Type</th>
    <th>Brand</th>
    <th>Description</th>
    <th>Serial No</th>
    <th>Asset No</th>
    <th>Date of Purchased</th>
    <th>Warranty Expiration</th>
    <th>Status</th>
  </tr>

  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>Keyboard</td>
    <td>HP</td>
    <td>One time use keyboard</td>
    <td>123456</td>
    <td>789456</td>
    <td>July 5, 2019</td>
    <td>August 6, 2015</td>
    <td>Available</td>
  </tr>

  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>Keyboard</td>
    <td>HP</td>
    <td>One time use keyboard</td>
    <td>123456</td>
    <td>789456</td>
    <td>July 5, 2019</td>
    <td>August 6, 2015</td>
    <td>Available</td>
  </tr>

  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>Keyboard</td>
    <td>HP</td>
    <td>One time use keyboard</td>
    <td>123456</td>
    <td>789456</td>
    <td>July 5, 2019</td>
    <td>August 6, 2015</td>
    <td>Available</td>
  </tr>

  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>Keyboard</td>
    <td>HP</td>
    <td>One time use keyboard</td>
    <td>123456</td>
    <td>789456</td>
    <td>July 5, 2019</td>
    <td>August 6, 2015</td>
    <td>Available</td>
  </tr>

  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>Keyboard</td>
    <td>HP</td>
    <td>One time use keyboard</td>
    <td>123456</td>
    <td>789456</td>
    <td>July 5, 2019</td>
    <td>August 6, 2015</td>
    <td>Available</td>
  </tr>
</table>