应使用[...nodelist]或array.from()将nodelist转为数组再遍历，且必须限定name属性并确保value非空，避免数据污染和逻辑断层。
querySelectorAll 获取所有 checkbox 节点后，如何安全遍历？
直接用 document.querySelectorAll('input[type="checkbox"]') 拿到的是 NodeList，不是数组，不能直接用 forEach（老版 IE 不支持），但现代浏览器基本没问题。更稳妥的做法是转成数组再处理：
常见错误现象：nodeList.forEach is not a function（IE 或某些低版本环境）
- 用
[...nodeList]展开成数组（推荐，简洁且兼容性好） - 或用
Array.from(nodeList)（语义清晰，IE11+ 支持） - 避免用
Array.prototype.forEach.call(nodeList, ...)——冗长且易出错
const checkboxes = document.querySelectorAll('input[type="checkbox"][name="tag"]');
[...checkboxes].forEach(cb => {
if (cb.checked) {
console.log(cb.value); // 只取选中的 value
}
});
只获取「当前 name 组」的选中值，而不是页面所有 checkbox
多个 checkbox 共享一个 name 属性才构成逻辑上的“多选组”，比如 name="fruit"。如果漏写 [name="xxx"]，容易误抓导航菜单、表单开关等其他 checkbox。
使用场景：表单提交前收集用户勾选的标签、权限、分类等
- 务必在选择器中限定
name，例如input[type="checkbox"][name="role"] - 不要依赖 class 或位置顺序——DOM 结构变动时极易断裂
- 若 name 值含特殊字符（如中括号、点），需用
document.querySelector(`input[name="${escapedName}"]`)配合 CSS 转义
用 FormData 自动提取 checkbox 值更简单？
如果目标只是为表单提交准备数据，FormData 会自动忽略未选中的 checkbox，且天然按 name 分组，比手写循环更可靠。
参数差异：FormData 对未选中的 checkbox 完全不收录，而手写循环需显式判断 checked
- 适用前提：checkbox 在
<form></form>内，且有name属性 - 示例：
const fd = new FormData(formEl); const values = [...fd.getAll('topic')]; - 注意：
fd.getAll()返回字符串数组，同名 checkbox 多个选中时自动聚合；fd.get()只取第一个
value 为空字符串时怎么处理？
HTML 中 checkbox 的 value 属性默认是 "on"，但很多开发者会显式设为 "" 或删掉它。此时 cb.value 是空串，但 cb.checked 仍为 true——容易导致业务逻辑漏判。
性能影响：空 value 不影响 DOM 查询速度，但可能让后端无法区分“未选”和“选了空值”
- 强制约定：所有 checkbox 必须设明确
value，如value="admin"、value="2024" - 检查手段：
if (!cb.value.trim()) console.warn('checkbox missing value:', cb) - 服务端不应依赖前端传来的空字符串做标识，优先用存在性判断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
