用 querySelectorAll 选中所有被勾选的复选框再 map 提取 value，一行即可；若在 form 内，可用 FormData.getAll() 自动获取同名复选框的选中值，value 未设置时默认为 "on"，建议显式指定。
直接用 querySelectorAll 选中所有被勾选的复选框，再用 map 提取 value，一行就能搞定。
用 querySelectorAll + map 快速提取
假设复选框有相同 name（如 name="hobby"）或共用某个 class（如 class="checkbox-item"），推荐这样写：
const checkedValues = Array.from(
document.querySelectorAll('input[name="hobby"]:checked')
).map(cb => cb.value);
说明：
-
document.querySelectorAll('input[name="hobby"]:checked')精准选出指定 name 下所有已勾选的<input type="checkbox"> -
Array.from()把伪数组（NodeList）转为真数组，才能用map - 如果想兼容老浏览器（如 IE），可改用
[...document.querySelectorAll(...)]展开
通过 form 元素统一获取（更语义化）
若复选框在同一个 <form></form> 内，可用 form.elements 或 FormData：
立即学习“Java免费学习笔记（深入）”；
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
const form = document.querySelector('#myForm');
const formData = new FormData(form);
const checkedValues = [...formData.getAll('hobby')]; // 自动收集同名 checkbox 的所有选中值
优点：
- 不用手动遍历 DOM，天然支持表单提交逻辑
-
FormData.getAll()对同名多值字段（如复选框）返回字符串数组 - 值自动是字符串类型，无需额外转换
注意 value 值未设置时的默认行为
如果复选框没写 value 属性，例如：<input type="checkbox" name="agree">，那么它被勾选后：
-
cb.value默认是"on"（不是true或空字符串） -
FormData.getAll('agree')也会返回["on"] - 建议始终显式设置
value，比如value="yes"，避免歧义
补充：监听变化实时更新数组
如果需要响应用户勾选/取消操作，可以绑定事件：
document.querySelectorAll('input[name="hobby"]').forEach(cb => {
cb.addEventListener('change', () => {
const current = Array.from(
document.querySelectorAll('input[name="hobby"]:checked')
).map(cb => cb.value);
console.log('当前选中：', current);
});
});
小提示：
- 用
change而非click，确保只在状态真正改变时触发 - 事件委托更高效（尤其动态增删复选框时），可绑定到父容器上再判断
e.target
