jQuery实现复选框全选和取消全选功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Checkbox Select/Deselect All Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<input type="checkbox" id="selectAll"> Select All
<div>
<input type="checkbox" class="item"> Item 1<br>
<input type="checkbox" class="item"> Item 2<br>
<input type="checkbox" class="item"> Item 3<br>
<input type="checkbox" class="item"> Item 4<br>
<!-- More checkboxes if needed -->
</div>
</div>
<script>
$(document).ready(function() {
$('#selectAll').click(function() {
// Check or uncheck all checkboxes
$('.item').prop('checked', this.checked);
});
// Check all checkboxes when any .item is checked
$('.item').click(function() {
$('#selectAll').prop('checked', $('.item:checked').length === $('.item').length);
});
});
</script>
</body>
</html>这段代码使用jQuery实现了复选框的全选和取消全选功能。当用户点击"Select All"复选框时，所有".item"类的复选框会根据"Select All"复选框的状态进行全选或取消全选。同时，当用户手动选择任意一个".item"类的复选框时，"Select All"复选框的状态会更新，如果所有".item"类的复选框都被选中，则"Select All"复选框也会被选中；如果任何一个".item"类的复选框未被选中，则"Select All"复选框都不会被选中。
评论已关闭