取消选中“全部选中”复选框

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> 

Answer 2

您可以仅添加以下事件处理程序：

$('#chkall').closest('table').on('change', ':checkbox:not(#chkall)', function() {
    if (!$(this).is(':checked'))
        $('#chkall').prop('checked', false);
});

Answer 3

您可以将复选框的数量与选中的复选框的数量进行比较。

如果change事件触发时数字不相等，请取消选中#chkall元素：

这里的例子

$('table :checkbox:not(#chkall)').on('change', function () {
  if ($(this).length !== $(this).closest('table').find(':checked:not(#chkall)').length) {
    $('#chkall').prop('checked', false);
  }
});

Answer 4

为所有其他复选框添加一个处理程序，以清除复选框。

$(":checkbox:not(#chkall)").change(function() {
    if (!this.checked) {
        $("#chkall").prop("checked", false);
    }
});

Answer 5

尝试像这样向您的所有复选框添加另一个更改事件

$('.yourcheckboxclass').change(function() { });

要么

$('#yourtable input:checkbox').change(function() { });

在函数中，选择您的#chkall并取消选中它。

Answer 6

尝试这样的事情：

 $('#chkall').on("change", function() { if (!$(this).is(':checked')) { $('.selectRow').prop('checked', false); } else { $('.selectRow').prop('checked', true); } }); $('.selectRow').each(function( index ){ $(this).on("change", function(){ if (!$(this).is(':checked')) { $('#chkall').prop('checked', false); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <th> <input type="checkbox" id="chkall" >Check All</input> </th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox" class="selectRow" /> </td> </tr> <tr> <td> <input type="checkbox" class="selectRow" /> </td> </tr> </tbody> </table>