在网页表单交互中，复选框的全选和反选功能是非常常见的需求，比如批量操作列表项、多选表单提交等场景都需要用到。通过JavaScript操作DOM元素和事件监听，就能快速实现这个功能，不需要依赖任何第三方库。
实现思路分析
要实现全选和反选功能，核心逻辑可以分为两部分：
- 全选逻辑：点击全选复选框时，遍历所有子复选框，将它们的选中状态和全选复选框的状态保持一致。
- 反选逻辑：点击反选按钮时，遍历所有子复选框，将每个复选框的选中状态取反，即选中的变为未选中，未选中的变为选中。
同时还需要处理子复选框的状态联动：当所有子复选框都被选中时，全选复选框自动变为选中状态；只要有任意一个子复选框未选中，全选复选框就自动变为未选中状态。
基础HTML结构
首先我们需要准备对应的HTML结构，包含一个全选复选框、一个反选按钮和多个子复选框：
<div class="checkbox-container">
<div>
<input type="checkbox" id="checkAll">
<label for="checkAll">全选</label>
<button id="reverseBtn">反选</button>
</div>
<div class="checkbox-list">
<input type="checkbox" class="item-check" value="1">
<label>选项一</label>
<input type="checkbox" class="item-check" value="2">
<label>选项二</label>
<input type="checkbox" class="item-check" value="3">
<label>选项三</label>
<input type="checkbox" class="item-check" value="4">
<label>选项四</label>
</div>
</div>
JavaScript实现代码
全选功能实现
首先获取全选复选框和所有子复选框元素，给全选复选框绑定change事件，当全选状态变化时，同步所有子复选框的状态：
// 获取全选复选框
const checkAll = document.getElementById('checkAll');
// 获取所有子复选框
const itemChecks = document.querySelectorAll('.item-check');
// 全选复选框点击事件
checkAll.addEventListener('change', function() {
// 遍历所有子复选框，设置选中状态和全选框一致
itemChecks.forEach(item => {
item.checked = checkAll.checked;
});
});
子复选框联动全选框
给每个子复选框绑定change事件，每次子复选框状态变化时，判断所有子复选框是否都被选中，同步全选框的状态：
// 给每个子复选框绑定change事件
itemChecks.forEach(item => {
item.addEventListener('change', function() {
// 判断所有子复选框是否都被选中
const allChecked = Array.from(itemChecks).every(check => check.checked);
// 同步全选框状态
checkAll.checked = allChecked;
});
});
反选功能实现
获取反选按钮，绑定点击事件，遍历所有子复选框，将每个的选中状态取反：
// 获取反选按钮
const reverseBtn = document.getElementById('reverseBtn');
// 反选按钮点击事件
reverseBtn.addEventListener('click', function() {
// 遍历所有子复选框，取反选中状态
itemChecks.forEach(item => {
item.checked = !item.checked;
});
// 反选后同步全选框状态
const allChecked = Array.from(itemChecks).every(check => check.checked);
checkAll.checked = allChecked;
});
完整可运行示例
将上面的代码整合起来，就是一个完整的可运行示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复选框全选反选示例</title>
</head>
<body>
<div class="checkbox-container">
<div>
<input type="checkbox" id="checkAll">
<label for="checkAll">全选</label>
<button id="reverseBtn">反选</button>
</div>
<div class="checkbox-list">
<input type="checkbox" class="item-check" value="1">
<label>选项一</label>
<input type="checkbox" class="item-check" value="2">
<label>选项二</label>
<input type="checkbox" class="item-check" value="3">
<label>选项三</label>
<input type="checkbox" class="item-check" value="4">
<label>选项四</label>
</div>
</div>
<script>
const checkAll = document.getElementById('checkAll');
const itemChecks = document.querySelectorAll('.item-check');
const reverseBtn = document.getElementById('reverseBtn');
// 全选逻辑
checkAll.addEventListener('change', function() {
itemChecks.forEach(item => {
item.checked = checkAll.checked;
});
});
// 子复选框联动全选
itemChecks.forEach(item => {
item.addEventListener('change', function() {
const allChecked = Array.from(itemChecks).every(check => check.checked);
checkAll.checked = allChecked;
});
});
// 反选逻辑
reverseBtn.addEventListener('click', function() {
itemChecks.forEach(item => {
item.checked = !item.checked;
});
const allChecked = Array.from(itemChecks).every(check => check.checked);
checkAll.checked = allChecked;
});
</script>
</body>
</html>
注意事项
- 获取DOM元素时要确保元素已经被加载，通常将JavaScript代码放在页面底部，或者使用
DOMContentLoaded事件包裹代码。 - 遍历
NodeList集合时，部分旧浏览器不支持forEach方法，可以先用Array.from转换为数组再操作，保证兼容性。 - 如果页面中有动态新增的复选框，需要给新增的复选框也绑定
change事件，或者采用事件委托的方式处理子复选框的状态变化。
JavaScript复选框全选反选修改时间：2026-07-16 00:06:35