复选框反选不能直接用 checked = !checked，因为需排除 disabled 元素；应遍历并仅对非禁用项执行 el.checked = !el.checked 并 dispatch change 事件。
复选框反选为什么不能直接用 checked = !checked
因为表单里可能混着禁用项（disabled），而反选逻辑通常只作用于可操作项。若对所有 input[type="checkbox"] 统一取反，会把 disabled 的也翻转——用户看不到变化，但 DOM 状态已改，后续提交或校验可能出错。
实操建议：
- 遍历前先过滤：只操作
!el.disabled的元素 - 别依赖
el.checked当前值做布尔取反，而是显式设为!el.checked，避免因初始未定义导致意外 - 如果表单有全选/反选切换按钮，记得同步更新全选框状态（见下节）
如何用原生 JavaScript 实现一键反选函数
核心是获取目标复选框集合、逐个处理、触发变更事件（以便监听函数响应）。示例函数如下：
function toggleCheckboxes(selector = 'input[type="checkbox"]') {
document.querySelectorAll(selector).forEach(el => {
if (!el.disabled) {
el.checked = !el.checked;
el.dispatchEvent(new Event('change', { bubbles: true }));
}
});
}
使用场景：
- 绑定到按钮：
onclick="toggleCheckboxes('#myForm input[name=role]')" - 配合数据筛选：先
querySelectorAll限定 name 或 class，避免误操作其他复选框 - 注意
dispatchEvent：Vue/React 等框架监听change事件时，不触发它会导致视图不同步
jQuery 用户怎么写更安全的反选
jQuery 的 .prop() 比 .attr() 更适合操作 checked，且链式调用天然过滤掉 disabled 元素（需加 :not(:disabled)）。
推荐写法：
$('input[type="checkbox"]:not(:disabled)').prop('checked', function() {
return !this.checked;
}).trigger('change');
容易踩的坑：
- 用
.attr('checked', true)会写死属性，无法反映真实勾选状态 - 漏掉
:not(:disabled)，导致禁用项被意外激活（尤其表单含「不可编辑但默认勾选」字段时） - 没
.trigger('change')，依赖change的验证或联动逻辑不会执行
反选后全选框状态不同步？手动修正逻辑
当存在一个「全选」复选框（如 id="checkall"）时，反选操作本身不会自动更新它。必须额外判断当前所有可操作项的状态来重置全选框。
关键判断逻辑：
- 全选框应为
checked→ 所有可操作项都为true - 全选框应为
indeterminate→ 部分为true，部分为false - 全选框应为未勾选 → 所有可操作项都为
false
示例片段（接在反选之后）：
const items = document.querySelectorAll('input[name="item"]:not(:disabled)');
const allChecked = Array.from(items).every(el => el.checked);
const someChecked = Array.from(items).some(el => el.checked);
const checkall = document.getElementById('checkall');
checkall.checked = allChecked;
checkall.indeterminate = !allChecked && someChecked;
这个逻辑必须在每次反选、单个勾选、取消勾选后都执行，否则 UI 和数据状态会脱节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
