通过原生JavaScript可实现复选框全选、反选与状态同步：1. 用checkAll控制所有item类复选框的选中状态；2. 通过循环遍历将每个item的checked属性取反实现反选；3. 监听每个子项的change事件，判断是否全部选中以同步“全选”状态。
实现复选框的全选和反选功能是前端开发中常见的需求，JavaScript 提供了简单有效的方式来操作 DOM 元素完成这一功能。下面介绍如何通过原生 JavaScript 实现复选框的全选与反选。
1. HTML 结构准备
首先需要一个“全选”主复选框和多个子复选框：
<input type="checkbox" id="checkAll"> <label>全选</label><br> <input type="checkbox" class="item" value="1"> 选项1<br> <input type="checkbox" class="item" value="2"> 选项2<br> <input type="checkbox" class="item" value="3"> 选项3<br> <input type="checkbox" class="item" value="4"> 选项4<br>
2. 全选功能实现
监听“全选”复选框的点击事件，将其状态同步给所有子复选框：
document.getElementById('checkAll').onclick = function() {
const items = document.getElementsByClassName('item');
for (let i = 0; i < items.length; i++) {
items[i].checked = this.checked;
}
};
说明：当“全选”被勾中时，所有 class 为 item 的复选框都被设为选中；取消勾选则全部取消。
立即学习“Java免费学习笔记（深入）”；
3. 反选功能实现
添加一个“反选”按钮，点击时将每个子复选框的状态取反：
document.getElementById('reverseBtn').onclick = function() {
const items = document.getElementsByClassName('item');
for (let i = 0; i < items.length; i++) {
items[i].checked = !items[i].checked;
}
};
如果想在没有额外按钮的情况下实现反选，也可以绑定在某个快捷键或双击事件上。
4. 智能全选状态同步（可选增强）
当用户手动选择所有子项时，自动勾中“全选”框；当任意一个子项取消时，取消“全选”状态：
const items = document.getElementsByClassName('item');
for (let i = 0; i < items.length; i++) {
items[i].onchange = function() {
const checkAll = document.getElementById('checkAll');
let allChecked = true;
for (let j = 0; j < items.length; j++) {
if (!items[j].checked) {
allChecked = false;
break;
}
}
checkAll.checked = allChecked;
};
}
这样可以提升用户体验，让“全选”框状态更准确地反映子项选择情况。
基本上就这些。通过简单的 DOM 操作和事件监听，就能轻松实现复选框的全选、反选及状态同步功能，不复杂但容易忽略细节。实际项目中建议封装成函数以便复用。
