用 document.querySelectorAll('input[type="checkbox"]:checked') 获取已勾选复选框节点，再遍历取 .value；漏写 type="checkbox" 会混入 radio，未设 value 则返回默认值 "on"。
多选按钮（checkbox）怎么用 document.querySelectorAll 拿值？
直接查 input[type="checkbox"]:checked 最稳，不用管 name 是否重复、是否在 form 里。常见错误是只写 input[name="xxx"]:checked 却漏掉 type="checkbox"，结果把 radio 也混进来了。
实操建议：
- 用
document.querySelectorAll('input[type="checkbox"]:checked')获取所有已勾选的节点 - 遍历后取
.value，注意没写value的 checkbox 会返回"on"（浏览器默认值） - 如果要区分“未勾选但存在”的项，得配合 name 或 data-* 属性做映射，不能只靠 checked 状态反推全集
- 动态渲染的 checkbox 要等 DOM 插入完成再执行查询，否则返回空 NodeList
jQuery 里 $("input:checkbox:checked").val() 为什么只返回第一个？
.val() 对多个元素调用时，只返回第一个匹配项的值——这是 jQuery 的设计行为，不是 bug。想拿全部值，必须手动遍历。
正确写法：
立即学习“前端免费学习笔记（深入）”；
-
$("input:checkbox:checked").map((i, el) => el.value).get()（推荐，返回数组） let vals = []; $("input:checkbox:checked").each((i, el) => vals.push(el.value));- 别用
.val()直接套多选集合，否则调试时发现值总对不上
表单提交时，checkbox 不传值的底层原因是什么？
HTML 规范规定：**未勾选的 checkbox 在表单序列化时不会出现在提交数据中**。也就是说，后端收不到 “false” 或 “off”，只看到“有这个 key” 或 “根本没有这个 key”。
这意味着：
- 不能靠后端判断
my_check === undefined就认为用户没选——可能用户根本没加载到这个字段 - 若需明确区分“未选”和“未提交”，前端得补一个隐藏域：
<input type="hidden" name="my_check" value="0">，再让 checkbox 的name和它一致（但不设 value），勾选时覆盖 hidden 的值 - 使用
FormData构造提交时同理，未勾选项不会被 append 进去
select[multiple] 和 checkbox 获取值的方式能混用吗？
不能。虽然都是“多选”，但 DOM 接口完全不同：select 用 selectedOptions，checkbox 用 :checked 查询或 checked 属性。强行套用会静默失败。
关键区别：
-
select[multiple].value只返回第一个选中项（或空字符串），完全不可靠 -
select[multiple].selectedOptions返回HTMLCollection，可用Array.from(...).map(o => o.value) -
input[type="checkbox"]没有selectedOptions，只有checked布尔属性 - 两者都不该用
options数组去遍历判断——那是老式单选select的写法，对 checkbox 无效
真实项目里最易忽略的点：后端约定和前端取值逻辑必须对齐。比如 checkbox 组用逗号拼接字符串传，还是用数组形式；select[multiple] 是发多个同名 key 还是 JSON 字符串。这些不提前确认，联调时 debug 半天才发现是协议没对上。
