js实现全选
实现全选功能的方法
在JavaScript中实现全选功能通常涉及监听全选复选框的点击事件，并根据其状态控制其他复选框的选中状态。以下是几种常见的实现方式：
基础DOM操作实现
通过获取所有目标复选框并遍历设置选中状态：
document.getElementById('selectAll').addEventListener('click', function() {
const checkboxes = document.querySelectorAll('.item-checkbox');
checkboxes.forEach(checkbox => {
checkbox.checked = this.checked;
});
});使用事件委托优化
当动态添加复选框时，事件委托更高效：
document.addEventListener('click', function(e) {
if (e.target.id === 'selectAll') {
const checkboxes = document.querySelectorAll('.item-checkbox');
checkboxes.forEach(checkbox => {
checkbox.checked = e.target.checked;
});
}
});配合表格实现
在表格场景中控制全选：
const selectAll = document.querySelector('#select-all');
const rowCheckboxes = document.querySelectorAll('tbody input[type="checkbox"]');
selectAll.addEventListener('change', () => {
rowCheckboxes.forEach(checkbox => {
checkbox.checked = selectAll.checked;
});
});
// 反选控制全选框状态
rowCheckboxes.forEach(checkbox => {
checkbox.addEventListener('change', () => {
selectAll.checked = [...rowCheckboxes].every(cb => cb.checked);
});
});使用jQuery简化实现
如果项目中使用jQuery：
$('#selectAll').click(function() {
$('.item-checkbox').prop('checked', this.checked);
});注意事项
- 确保全选框和其他复选框有正确的关联关系
- 动态添加元素时需要重新绑定事件或使用事件委托
- 考虑使用
label标签提高可用性 - 移动端需要处理触摸事件
这些方法可以根据具体场景选择使用，基础DOM操作适合简单页面，事件委托适合动态内容，jQuery适合已有相关依赖的项目。
