最稳方式是用 document.queryselectorall('input[type="checkbox"]:checked') 获取所有勾选的 checkbox 元素，再通过 array.from().map() 提取 value；formdata 可自动收集同名勾选项，但需确保 name 属性存在且一致。
用 document.querySelectorAll 拿所有勾选的 checkbox 元素
浏览器原生不提供“直接获取所有选中 checkbox 值”的单个 API，得自己筛选。最稳的方式是先拿到所有 input[type="checkbox"]，再过滤出 checked 为 true 的那些。
常见错误是只写 document.querySelector('input[name="xxx"]') —— 这只能拿第一个，漏掉其余；或者用 document.getElementsByName 返回类数组但没过滤，导致包含未勾选项。
- 用
document.querySelectorAll('input[name="hobby"]:checked')最精准：既限定 name，又只取已勾选 - 如果 name 动态或不统一，可用
document.querySelectorAll('input[type="checkbox"]:checked') - 返回的是
NodeList，需转数组再.map()提取value，不能直接调.map
const checkedValues = Array.from(
document.querySelectorAll('input[name="tag"]:checked')
).map(cb => cb.value);
FormData 自动收集 checkbox 值（适合表单提交场景）
如果你最终是要发请求，别手动拼数组——FormData 会自动把所有勾选的同名 checkbox 当作多个同名字段处理，后端能正常收到数组（如 PHP 的 $_POST['city'][]，Node.js 的 body-parser 也默认支持）。
注意：未勾选的 checkbox 不会出现在 FormData 中，这是正确行为，不是 bug。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须确保每个
input有name属性，否则FormData忽略它 -
value值为空字符串（value=""）也会被收录，不是只有非空才传 - 用
new FormData(formElement)构造最安全；若用new FormData()手动 append，记得对每个勾选项单独.append('name', value)
React 里别直接操作 DOM 拿 checkbox 值
在 React 函数组件中，用 useRef 或 useState 管理多选状态更可靠。直接查 document.querySelectorAll 容易和 React 的状态不同步，尤其涉及重渲染或异步更新时。
典型翻车点：用户勾选后点了按钮，但事件处理器里读到的还是旧 state，因为 setState 是异步的；或者用了 ref 却没绑定到每个 checkbox 上。
- 推荐用受控组件：每个 checkbox 的
checked绑定到 state 数组，onChange里用includes+filter或toggle更新数组 - 如果 checkbox 列表动态生成，确保 key 稳定，避免因 key 错误导致勾选状态错乱
- 需要“全选/取消”功能时，别遍历 DOM 设
checked，而是批量更新 state
后端接收不到值？检查 name 属性是否带 []
PHP、Laravel、ThinkPHP 等框架习惯靠 name="interest[]" 这种写法识别多值，但浏览器本身不认方括号——它只是普通 name 字符串。能否收到数组，完全取决于后端解析逻辑。
所以问题常出在两端约定不一致：前端写了 name="city"，后端却按 city[] 解析；或前端加了 []，后端却当普通字符串处理。
- 纯 JS 发送时，
FormData和URLSearchParams都不关心[]，它们只看 name 字符串是否相同 - 用
fetch发 JSON 时，你本就要自己构造数组，[]在 name 里毫无意义 - 调试时用浏览器 Network 面板看 Payload，确认实际发出的键名和值是否符合后端预期
value="on"，而你没显式设 value，后端收到一堆 "on"。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
