js实现全选反选
实现全选与反选功能
全选和反选是表单操作中常见的功能，可以通过JavaScript动态控制复选框的状态。以下是两种典型实现方式：
基础DOM操作实现
// 获取全选复选框和子复选框
const selectAll = document.getElementById('selectAll');
const checkboxes = document.querySelectorAll('.item-checkbox');
// 全选逻辑
selectAll.addEventListener('change', function() {
checkboxes.forEach(checkbox => {
checkbox.checked = this.checked;
});
});
// 子复选框逻辑
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
selectAll.checked = [...checkboxes].every(c => c.checked);
});
});反选功能扩展
// 反选按钮事件
document.getElementById('invertSelect').addEventListener('click', function() {
checkboxes.forEach(checkbox => {
checkbox.checked = !checkbox.checked;
});
updateSelectAllState();
});
// 更新全选状态函数
function updateSelectAllState() {
selectAll.checked = [...checkboxes].every(c => c.checked);
}注意事项
- 确保HTML结构包含全选复选框和带有统一class的子复选框
- 事件委托方式更适合动态生成的列表
- 现代框架如Vue/React可通过数据绑定更简洁地实现
<!-- 基础HTML结构示例 -->
<input type="checkbox" id="selectAll">全选
<button id="invertSelect">反选</button>
<div class="item-list">
<input type="checkbox" class="item-checkbox">选项1
<input type="checkbox" class="item-checkbox">选项2
</div>性能优化建议
对于大型列表建议使用事件委托 考虑添加防抖处理频繁操作 可结合本地存储保存选择状态
