最稳的拦截方式是同时使用 event.preventdefault() 和 event.target.checked = false；change 事件更语义化且兼容键盘与读屏器，但不冒泡，动态列表需事件委托；仅 return false 或仅设 checked = false 均存在兼容性问题。
直接在 click 事件里用 event.preventDefault() + event.target.checked = false 是最稳的拦截方式，但必须在状态变更前判断；change 更语义准确、兼容键盘和读屏器，但不冒泡，动态列表得靠事件委托。
为什么不能只靠 return false 或只设 checked = false
只写 return false 在 Safari 和部分旧版浏览器里可能失效——它阻止了默认行为，但没同步重置 DOM 状态，用户会看到“先打勾再闪退”；只设 event.target.checked = false 而不调 event.preventDefault()，在某些安卓 WebView 中仍会触发两次状态切换。正确做法是两者都做：
-
event.preventDefault()阻止浏览器默认勾选动作 -
event.target.checked = false强制 DOM 状态回退 - 统计已选项时，务必用
el.checked（JS 属性），别用:checked（CSS 伪类），后者在click触发瞬间还没更新
change 事件比 click 更可靠但要注意冒泡限制
change 在 checkbox 真正切换完成后再触发，此时 event.target.checked 和 DOM 实际状态完全一致，且支持空格键、Tab+Enter、读屏器等非鼠标操作。但它不冒泡，无法监听父容器——所以不能像 click 那样用事件委托统一处理整个区域。
- 静态列表：直接给每个
input[type="checkbox"]绑change即可 - 动态插入或频繁重渲染：改用
click+ 事件委托，或监听父级change后用event.target.matches('input[type="checkbox"]')过滤 - 允许取消来腾名额？统计时得先读原状态：
const wasChecked = event.target.checked;，再按新状态算总数
动态列表必须用事件委托，别硬绑每个元素
如果复选框是 JS 拉取后插入（如搜索结果、权限树节点）、或整个区块会 innerHTML 重绘，逐个绑定 addEventListener 容易漏绑、内存泄漏、重复绑定。
- 推荐监听父容器（如
form或带id的div）的click或change事件 - 用
event.target.matches('input[type="checkbox"][data-limit]')精准过滤目标，支持不同组设不同上限（如data-limit="3"） - 查同组元素时，别依赖
name——多个表单可能共用 name；改用event.target.closest('.permission-group').querySelectorAll('input[type="checkbox"]')
服务端校验不是可选项，是必须项。前端限制纯属体验优化，checked 状态能被 DevTools 直接改，表单也能绕过 JS 提交。后端收到数据后，必须重新统计并拒绝超限请求——否则攻击者发个含 50 个 value 的 POST 就能突破所有前端逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
