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

Question

I made a table that has checkbox at the beginning of the row. I also made a "Check All" checkbox. When that is "checked", all other checkbox on the table will be checked. That works fine. But, when I "unchecked" one checkbox on the table, the "Check All" checkbox is still "checked". How can I uncheck it when one of the other checkboxes changed?

I have my code here:

Script:

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

Table (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

Try comparing the number of checkboxes with the number of checked checkboxes

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

This code will also enable the check-all if you manually check ever single checkbox

---

Full example

 $('#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

You can just add this event handler:

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

Answer 3

You could compare the number of checkboxes with the number of checked checkboxes.

If the numbers aren't equal when a change event is fired, uncheck the #chkall element:

Example Here

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

Answer 4

Add a handler for all the other checkboxes that clears the check-alll box.

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

Answer 5

Try to add another change event to all your checkboxes like this

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

or

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

inside the function, select your #chkall and uncheck it.

Answer 6

Try something like this:

 $('#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>