js实现全选
实现全选功能的方法
在JavaScript中实现全选功能通常涉及操作复选框（checkbox）的checked属性。以下是几种常见场景的实现方式：
通过ID直接操作单个复选框
document.getElementById('selectAll').addEventListener('change', function() {
const isChecked = this.checked;
document.getElementById('item1').checked = isChecked;
document.getElementById('item2').checked = isChecked;
// 手动为每个需要控制的复选框设置状态
});批量操作同类复选框（推荐）
// 全选复选框事件
document.getElementById('selectAll').addEventListener('change', function() {
const checkboxes = document.querySelectorAll('.item-checkbox');
checkboxes.forEach(checkbox => {
checkbox.checked = this.checked;
});
});
// 子复选框事件（用于取消全选状态）
const itemCheckboxes = document.querySelectorAll('.item-checkbox');
itemCheckboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
const allChecked = [...itemCheckboxes].every(cb => cb.checked);
document.getElementById('selectAll').checked = allChecked;
});
});使用表单和name属性
<form id="myForm">
<input type="checkbox" id="selectAll" onclick="toggleAll()">
<input type="checkbox" name="item" value="1">
<input type="checkbox" name="item" value="2">
</form>
<script>
function toggleAll() {
const form = document.getElementById('myForm');
const items = form.elements['item'];
const selectAll = form.elements['selectAll'].checked;
for(let i = 0; i < items.length; i++) {
items[i].checked = selectAll;
}
}
</script>使用事件委托优化性能
document.addEventListener('change', function(e) {
// 全选按钮触发
if(e.target.id === 'selectAll') {
document.querySelectorAll('.item-checkbox').forEach(cb => {
cb.checked = e.target.checked;
});
}
// 子复选框触发
else if(e.target.classList.contains('item-checkbox')) {
const checkboxes = document.querySelectorAll('.item-checkbox');
document.getElementById('selectAll').checked =
[...checkboxes].every(cb => cb.checked);
}
});注意事项
- 确保全选复选框和子复选框有正确的关联关系（通过class、name属性或DOM结构）
- 处理子复选框全部选中时自动勾选全选复选框的情况
- 考虑使用事件委托方式减少事件监听器数量
- 对于动态加载的内容，需要在内容加载后重新绑定事件或使用事件委托
以上方法可以根据实际项目需求选择或组合使用。第一种方法适合简单场景，第二种和第四种方法更适合复杂交互。
