我提供了在单击复选框时select-all代码，孩子 复选框被选中/取消选中。现在，如果我取消选择任何子复选框， "全选"复选框应取消选中。我该怎么办？
$(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>要在用户取消选中任何复选框时取消选中全选，请尝试以下代码。
$('.checkbox').click(function(){
if($(this).prop("checked") == false){
$('#select-all').prop('checked', false);
}
}
您可以
为子级指定类复选框，并为未选中选中的检查条件。
$('#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 在
更改子复选框时做你的东西。
$('.checkbox').change(function(){
if($(this).prop("checked") == false){
$('#select-all').prop('checked', false);
}
}
我建议如下，它允许#select-all元素选中所有"子"复选框，并允许这些子复选框选中或取消选中#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>JS小提琴演示。
但是，如果您希望在纯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>JS小提琴演示。
引用：
- JavaScript：
-
Array.prototype.filter(). -
Array.prototype.forEach(). -
Array.prototype.slice(). -
document.getElementById(). -
document.querySelectorAll(). -
Event对象。 -
EventTarget.addEventListener(). -
Function.prototype.call().
-
- j查询：
-
filter(). -
find(). -
not(). -
on(). -
prop().
-