html中没有独立“多选框”控件，多项选择唯一合法方式是；select[multiple]或input[multiple]均无效。queryselector只返回首个匹配元素，需用queryselectorall('input[name="xxx"]:checked')获取已勾选项。
HTML里没有“多选框”这个独立控件，input[type="checkbox"] 就是唯一合法的多项选择实现方式。用 select[multiple] 或给 input 加 multiple 属性都是无效的，浏览器会直接忽略。
为什么 document.querySelector('input[name="xxx"]') 只拿到第一个 checkbox？
因为 querySelector 本意就是找「第一个匹配元素」。多选场景下你必然需要全部，不是单个。
- 改用
document.querySelectorAll('input[name="xxx"]:checked')—— 加:checked过滤，只拿当前勾选的 - 如果要操作全部（比如全选/反选），用
document.querySelectorAll('input[name="xxx"]')，不加:checked - 别用
getElementsByName：它返回的是 HTMLCollection，不支持forEach，且在动态插入新选项后可能不更新 - name 值里别带空格或特殊字符，比如
name="user interests"会导致后端解析失败或 JS 选择器失效
name 相同但后端收不到数组？检查这三个点
表单提交时，浏览器原生行为是把所有勾选的同名 input 拼成多个键值对（如 hobby=reading&hobby=music），但能否被后端识别为数组，取决于框架配置和命名习惯。
- Flask/Django：直接用
name="hobby"，后端调request.form.getlist("hobby")即可 - PHP：推荐
name="hobby[]"，$_POST["hobby"]自动是数组；但注意这不是 HTML 标准，JS 里读el.name会得到字符串"hobby[]"，容易误判 - Express + body-parser：默认只取第一个同名值，必须显式配置
extended: true，否则req.body.hobby是字符串而非数组 - 最稳做法：打开浏览器 Network → Payload，确认发出的数据键名和值是否符合预期——别信 HTML 写了什么，要看实际发了什么
CSS Grid 布局四列 checkbox，为什么不用 float 或 inline-block？
float 容易错行，inline-block 受换行符和字体大小影响导致间隙不可控，而 Grid 能真正按列均分、自动折行、间隙精准。
- 容器加
display: grid和grid-template-columns: repeat(4, 1fr) - 用
gap: 0.5rem控制项间距，比每个 item 写margin更干净 - 每个 checkbox 必须包在
div.checkbox-item里，再把input+label放进去；不要把input直接丢进 grid 容器——否则 label 无法对齐，且无障碍语义断裂 - label 推荐用包裹写法：
<label><input type="checkbox"> 阅读</label>，比for/id关联更可靠，尤其对动态插入的选项
最容易被忽略的是：所有 checkbox 的 value 必须明确设置。不写 value，勾选后提交的全是 "on"，后端根本分不清用户到底选了哪一项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
