最稳方式是document.querySelectorAll('input[type="checkbox"]:checked')取节点再读.value；必须加type="checkbox"防误选radio；value须设语义化值如"value=apple"；监听change而非click事件。
直接用 document.querySelectorAll('input[type="checkbox"]:checked') 拿节点，再取 .value ——这是最稳、兼容性最好、也最不容易被动态渲染坑到的方式。
为什么不能只靠 name 选择器？
只写 input[name="xxx"]:checked 会漏掉隐患：如果页面里同时存在同名的 radio 或其他 input 类型，它们也可能被误选进来（尤其当 DOM 结构混乱或模板复用时）。加 type="checkbox" 是必须的防御性写法。
- 正确：
document.querySelectorAll('input[type="checkbox"][name="tag"]:checked') - 危险：
document.querySelectorAll('input[name="tag"]:checked')（可能混入 radio） - 更危险：
document.getElementsByName("tag")（返回 HTMLCollection，不支持forEach，IE 行为不一致）
value 没写会怎样？
没显式设置 value 的 checkbox，勾选后提交或读取时返回的都是浏览器默认值 "on"。后端拿到一堆 "on"，根本分不清用户到底选了“苹果”还是“香蕉”。
- 必须为每个 checkbox 设置语义化
value，比如value="apple"、value="101" - 别用
value="1"、value="2"这类无上下文数字，除非后端明确约定且能反查 - 表格中批量 checkbox，
value应该是唯一业务 ID，如value="order_789"
监听 change 还是 click？
用 change 事件，不是 click。前者在 checkbox 状态真正改变后触发；后者可能在 focus 或键盘操作时误触发，且无法捕获空格键切换等辅助操作。
立即学习“前端免费学习笔记（深入）”；
- 正确绑定：
element.addEventListener('change', handler) - 如果要全选/反选，别反复调
querySelectorAll，先缓存节点列表：const allBoxes = document.querySelectorAll('input[name="tag"]') - 动态渲染（如 React/Vue 组件）中，确保 DOM 已挂载、节点已插入文档后再执行查询，否则
querySelectorAll返回空 NodeList
name 相同只是分组前提，真正决定能否拿到多个值的是：是否勾选、是否有有效 value、是否用对了查询方式——三者缺一不可。最容易忽略的是 value 的语义化和事件类型选择，而不是语法本身。
