js全选复选框怎么实现
实现全选复选框的方法
通过监听全选复选框的点击事件，获取所有需要被控制的子复选框，并根据全选状态设置子复选框的选中状态。
document.getElementById('selectAll').addEventListener('click', function() {
const checkboxes = document.querySelectorAll('.item-checkbox');
checkboxes.forEach(checkbox => {
checkbox.checked = this.checked;
});
});处理子复选框状态变化
当子复选框状态变化时，检查是否所有子复选框都被选中，如果是，则自动选中全选复选框；否则取消全选复选框的选中状态。
const checkboxes = document.querySelectorAll('.item-checkbox');
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
const allChecked = Array.from(checkboxes).every(cb => cb.checked);
document.getElementById('selectAll').checked = allChecked;
});
});HTML结构示例
确保HTML中包含全选复选框和子复选框，并为它们设置合适的类名或ID。
<input type="checkbox" id="selectAll"> 全选
<div>
<input type="checkbox" class="item-checkbox"> 选项1
<input type="checkbox" class="item-checkbox"> 选项2
<input type="checkbox" class="item-checkbox"> 选项3
</div>使用jQuery简化实现
如果项目中使用了jQuery，可以通过更简洁的代码实现相同功能。
$('#selectAll').click(function() {
$('.item-checkbox').prop('checked', this.checked);
});
$('.item-checkbox').change(function() {
$('#selectAll').prop('checked', $('.item-checkbox:checked').length === $('.item-checkbox').length);
});注意事项
确保在DOM加载完成后执行JavaScript代码，可以将代码放在DOMContentLoaded事件监听器中或放在文档底部。
document.addEventListener('DOMContentLoaded', function() {
// 全选复选框的实现代码
});
