mercredi 4 février 2015

Uncheck a "Check all" Checkbox

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>




Aucun commentaire:

Enregistrer un commentaire