js实现表单全选
实现表单全选功能
在JavaScript中实现表单全选功能，通常涉及监听全选复选框的点击事件，并根据其状态设置其他复选框的选中状态。
HTML结构示例
<input type="checkbox" id="selectAll"> 全选
<div class="item-list">
<input type="checkbox" class="item"> 选项1
<input type="checkbox" class="item"> 选项2
<input type="checkbox" class="item"> 选项3
</div>JavaScript实现
// 获取全选复选框和所有项目复选框
const selectAll = document.getElementById('selectAll');
const items = document.querySelectorAll('.item');
// 监听全选复选框的点击事件
selectAll.addEventListener('click', function() {
items.forEach(item => {
item.checked = this.checked;
});
});
// 监听项目复选框的变化，更新全选状态
items.forEach(item => {
item.addEventListener('change', function() {
const allChecked = [...items].every(item => item.checked);
selectAll.checked = allChecked;
});
});实现反选功能
如果需要实现反选功能，可以添加以下代码：
const invertBtn = document.getElementById('invertSelection');
invertBtn.addEventListener('click', function() {
items.forEach(item => {
item.checked = !item.checked;
});
updateSelectAllState();
});
function updateSelectAllState() {
const allChecked = [...items].every(item => item.checked);
selectAll.checked = allChecked;
}使用事件委托优化性能
对于大量复选框的情况，可以使用事件委托来优化性能：
document.querySelector('.item-list').addEventListener('change', function(e) {
if(e.target.classList.contains('item')) {
const allChecked = [...items].every(item => item.checked);
selectAll.checked = allChecked;
}
});注意事项
- 确保HTML中的复选框具有正确的class或id属性以便JavaScript选择
- 考虑添加防抖处理，如果复选框数量特别大
- 对于动态添加的复选框，需要使用事件委托或重新绑定事件
