批量取值关键在于用 queryselectorall 获取全部已勾选节点，显式设置 value 避免默认 "on"，手动维护 indeterminate 状态，注意 disabled 元素不参与 :checked 匹配。
批量取值的关键不是“怎么写多个 input”，而是“怎么让 JS 一次性拿到所有目标值且不漏、不错、不卡”。核心在 name 统一 + :checked 过滤 + NodeList 处理得当。
为什么 document.querySelector('input[name="xxx"]') 总是只拿到第一个？
因为 querySelector 本意就是找「第一个匹配项」。批量场景下必须用 querySelectorAll，它返回的是 NodeList（类数组），才能遍历全部。
- 错误写法：
document.querySelector('input[name="tag"]:checked')→ 永远只返回一个或 null - 正确写法：
document.querySelectorAll('input[name="tag"]:checked')→ 返回所有已勾选的节点集合 - 动态插入的 checkbox（如 Vue/React 渲染后）也能被
querySelectorAll捕获，但需确保查询时机在 DOM 更新之后 - 别用
getElementsByName：IE 下返回 HTMLCollection，不支持forEach；现代浏览器虽兼容，但语义不如querySelectorAll明确
value 为空或全是 "on"，后端收不到真实数据？
没写 value 属性的 input type="checkbox"，勾选后提交的值默认是 "on" —— 后端根本分不清用户选了哪个选项。
- 每个
input必须显式设value，且应有意义：比如数据库 ID（value="1001"）、业务编码（value="admin_read"） - 避免用
value="true"或value="1"这类无上下文的值，除非后端有固定映射表 - 批量取值时直接读
.value：Array.from(els).map(el => el.value)，别试图从id或data-属性里绕路取 - 如果 value 是数字字符串（如
"123"），前端校验时可用Number.isInteger(+val)判断是否合法整数 ID
全选框的 indeterminate 状态怎么手动维护？
HTML 原生不自动计算“部分勾选”状态。indeterminate 是纯 JS 控制的视觉属性，不影响提交，但对用户体验至关重要。
- 监听子 checkbox 的
change事件，统计当前勾选项数量：const checkedCount = els.filter(el => el.checked).length - 设主 checkbox：
mainCheckbox.checked = checkedCount === total;，mainCheckbox.indeterminate = checkedCount > 0 && checkedCount -
indeterminate不会触发change事件，所以更新 UI 计数等逻辑必须放在子项或主项的事件处理中统一调用 - 表格分页或虚拟滚动时，
total应为「当前可见项总数」，不是全量数据总数——否则 indeterminate 状态会误导用户
批量取值后，为什么上传或提交总丢几个？
常见原因不是 JS 没取到，而是后续处理阶段把 NodeList 当成了真数组，或忽略了 disabled / 动态状态。
- NodeList 不支持
map、filter等数组方法：必须先转成数组，Array.from(els)或[...els] - 要排除
disabled的 checkbox：Array.from(els).filter(el => el.checked && !el.disabled) - 如果 checkbox 是通过
innerHTML插入的，且没绑定事件，el.checked可能仍为false（DOM 属性未同步），此时应优先读el.hasAttribute('checked')或直接依赖:checked伪类选择器结果 - 大列表（>200 项）批量操作前，务必加 ID 格式校验和去重：
[...new Set(ids)]，否则后端可能因重复 ID 报错或幂等失效
真正容易被忽略的是：indeterminate 状态不会反映在表单序列化结果里，也不参与提交；而 disabled 的 checkbox 即使勾选了，也不会出现在 :checked 选择器结果中——这两点决定了你看到的“已选中”，和最终发出去的数据，可能根本不是一回事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
