I have provided the code which on click select-all
checkbox , child checkbox gets checked/unchecked. Now if I deselect any child checkbox , 'select-all' checkbox should get unchecked. How do I do?
$(document).ready(function() { $('#select-all').click(function(event) { var $that = $(this); $(':checkbox').each(function() { this.checked = $that.is(':checked'); }); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="select" style="margin-top:54px; margin-left:10px; margin-right:10px;"> <table class="w3-table-all w3-centered w3-hoverable"> <tr class="w3-gray" style="width:100%"> <th style="padding:20px;"><input id="select-all" class="w3-check w3-left" type="checkbox"><span style="padding:20px;">User name</span></th> <th style="padding:15px;">User Id</th> <th style="padding:15px;">Designation</th> <th style="padding:15px;">Phone No</th> <th style="padding:15px;">Address</th> </tr> <tr> <td style="padding:20px;"><input class="w3-check w3-left" type="checkbox"><span style="padding:20px;">mandeep kumbhar</span></td> <td style="padding:20px">employee@123</td> <td style="padding:20px">security Incharge</td> <td style="padding:20px">123456789</td> <td style="padding:20px">18/522,Neelkanth CHS,Nehru Nagar,Kurla East,Mumbai-400024</td> </tr> <tr> <td style="padding:20px;"><input class="w3-check w3-left" type="checkbox"><span style="padding:20px;">mandeep kumbhar</span></td> <td style="padding:20px">employee@123</td> <td style="padding:20px">security Incharge</td> <td style="padding:20px">123456789</td> <td style="padding:20px">awtry lbduyvetyd jhvdytf ihuusb</td> </tr> <tr> <td style="padding:20px;"><input class="w3-check w3-left" type="checkbox"><span style="padding:20px;">mandeep kumbhar</span></td> <td style="padding:20px">employee@123</td> <td style="padding:20px">security Incharge</td> <td style="padding:20px">123456789</td> <td style="padding:20px">awtry lbduyvetyd jhvdytf ihuusb</td> </tr> </table> </div>
To uncheck select-all when user uncheck any checkbox try below code.
$('.checkbox').click(function(){
if($(this).prop("checked") == false){
$('#select-all').prop('checked', false);
}
}
You can give class for child checkbox and check condition for checked unchecked.
$('#checkall').on('change', function() { $('.test:checkbox').prop('checked', $(this).is(":checked")); }); $('.test').on('change', function() { if (!$(this).is(':checked')) { $('.test').prop('checked', false); $('#checkall').prop('checked', false); } if ($('.test:checked').length === 1) { $('.test').prop('checked', false); $('#checkall').prop('checked', false); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="checkall" />Check all <input type="checkbox" class="test" />1 <input type="checkbox" class="test" />2 <input type="checkbox" class="test" />3 <input type="checkbox" class="test" />4
Do your stuff in on change of child checkbox.
$('.checkbox').change(function(){
if($(this).prop("checked") == false){
$('#select-all').prop('checked', false);
}
}
I'd suggest the following, which allows the #select-all
element to check all the 'child' check-boxes, and allows those child check-boxes to check, or uncheck, the #select-all
:
// caching the <table> element:
var tableElement = $('table');
// binding the anonymous function of the on() method to the
// 'change' event that takes place on <input> elements of
// type=checkbox:
tableElement.on('change', 'input[type=checkbox]', function(event) {
// caching the changed element:
var changed = event.target,
// caching:
checkboxes = tableElement
// <input> elements within the <table>
// of type=checkbox:
.find('input[type=checkbox]')
// which do not match the '#select-all'
// selector:
.not('#select-all');
// if the changed element has the id of 'select-all':
if (changed.id === 'select-all') {
// we update the 'checked' property of the cached
// check-box inputs to reflect the checked state
// of the '#select-all' element:
checkboxes.prop('checked', changed.checked);
} else {
// here we check that the number of checked checkboxes
// is equal to the number of check-boxes (effectively
// finding out whether all, or not-all, check-boxes are
// checked:
var allChecked = checkboxes.length === checkboxes.filter(':checked').length
// here we update the 'checked' property of the
// '#select-all' check-box to true (if the
// number of checked check-boxes is equal to the
// number of check-boxes) or false (if the number
// of checked check-boxes is not equal to the
// number of check-boxes):
$('#select-all').prop(
'checked', allChecked
);
}
});
var tableElement = $('table'); tableElement.on('change', 'input[type=checkbox]', function(event) { var changed = event.target, checkboxes = tableElement .find('input[type=checkbox]') .not('#select-all'); if (changed.id === 'select-all') { checkboxes.prop('checked', changed.checked) } else { var allChecked = checkboxes.length === checkboxes.filter(':checked').length $('#select-all').prop( 'checked', allChecked ); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="select" style="margin-top:54px; margin-left:10px; margin-right:10px;"> <table class="w3-table-all w3-centered w3-hoverable"> <tr class="w3-gray" style="width:100%"> <th> <input id="select-all" class="w3-check w3-left" type="checkbox"> <span>User name</span></th> <th>User Id</th> <th>Designation</th> <th>Phone No</th> <th>Address</th> </tr> <tr> <td> <input class="w3-check w3-left" type="checkbox"> <span>mandeep kumbhar</span></td> <td>employee@123</td> <td>security Incharge</td> <td>123456789</td> <td>18/522,Neelkanth CHS,Nehru Nagar,Kurla East,Mumbai-400024</td> </tr> <tr> <td> <input class="w3-check w3-left" type="checkbox"> <span>mandeep kumbhar</span></td> <td>employee@123</td> <td>security Incharge</td> <td>123456789</td> <td>awtry lbduyvetyd jhvdytf ihuusb</td> </tr> <tr> <td> <input class="w3-check w3-left" type="checkbox"> <span>mandeep kumbhar</span></td> <td>employee@123</td> <td>security Incharge</td> <td>123456789</td> <td>awtry lbduyvetyd jhvdytf ihuusb</td> </tr> </table> </div>
If, however, you'd prefer to do this in plain JavaScript:
// a named, rather than anonymous, function to handle
// the functionality, passing in the event Object:
function checkToggle(event) {
// caching the changed element:
var changed = event.target,
// caching the element with the id of 'select-all':
selectAll = document.getElementById('select-all'),
// caching all <input> elements of type=checkbox,
// using Function.prototype.call() to apply
// Array.prototype.slice() to the HTMLCollection
// returned by document.querySelectorAll(), in order
// to convert the Array-like HTMLCollection into an
// Array:
checkboxes = Array.prototype.slice.call(
this.querySelectorAll('input[type=checkbox]')
// filtering the Array of <input> elements:
).filter(function(check) {
// retaining only those <input> elements which are
// not the selectAll element:
return check !== selectAll;
});
// if the changed element is the selectAll element:
if (changed === selectAll) {
// we iterate over the Array of checkboxes using
// Array.prototype.forEach():
checkboxes.forEach(function(check) {
// 'check' is a reference to the current
// check-box in the Array of check-boxes;
// and here we update the checked property
// of each <input> to reflect the state of
// the selectAll <input>:
check.checked = selectAll.checked;
});
} else {
// filtering the array of checkboxes to retain only
// those that are checked:
var allChecked = checkboxes.filter(function(check) {
return check.checked;
// retrieving the length of the filtered Array and
// comparing that length to the length of the Array
// check-boxes in total:
}).length === checkboxes.length;
// updating the 'checked' property of the selectAll
// element to true (if all 'child' checkboxes are
// checked) or false (if not all 'child' checkboxes
// are checked):
selectAll.checked = allChecked;
}
}
var tableElement = document.querySelector('table');
tableElement.addEventListener('change', checkToggle);
function checkToggle(event) { var changed = event.target, selectAll = document.getElementById('select-all'), checkboxes = Array.prototype.slice.call( this.querySelectorAll('input[type=checkbox]') ).filter(function(check) { return check !== selectAll; }); if (changed === selectAll) { checkboxes.forEach(function(check) { check.checked = selectAll.checked; }); } else { var allChecked = checkboxes.filter(function(check) { return check.checked; }).length === checkboxes.length; selectAll.checked = allChecked; } } var tableElement = document.querySelector('table'); tableElement.addEventListener('change', checkToggle);
<div id="select" style="margin-top:54px; margin-left:10px; margin-right:10px;"> <table class="w3-table-all w3-centered w3-hoverable"> <tr class="w3-gray" style="width:100%"> <th> <input id="select-all" class="w3-check w3-left" type="checkbox"> <span>User name</span></th> <th>User Id</th> <th>Designation</th> <th>Phone No</th> <th>Address</th> </tr> <tr> <td> <input class="w3-check w3-left" type="checkbox"> <span>mandeep kumbhar</span></td> <td>employee@123</td> <td>security Incharge</td> <td>123456789</td> <td>18/522,Neelkanth CHS,Nehru Nagar,Kurla East,Mumbai-400024</td> </tr> <tr> <td> <input class="w3-check w3-left" type="checkbox"> <span>mandeep kumbhar</span></td> <td>employee@123</td> <td>security Incharge</td> <td>123456789</td> <td>awtry lbduyvetyd jhvdytf ihuusb</td> </tr> <tr> <td> <input class="w3-check w3-left" type="checkbox"> <span>mandeep kumbhar</span></td> <td>employee@123</td> <td>security Incharge</td> <td>123456789</td> <td>awtry lbduyvetyd jhvdytf ihuusb</td> </tr> </table> </div>
References:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.