复选框必须用 input[type="checkbox"]，而非 select[multiple]；需统一 name 实现多选提交，CSS Grid 实现四列对齐，JS 读取须加 :checked 过滤，前后端 name 和解析逻辑须一致。
复选框必须用 input[type="checkbox"]，不是 select[multiple]
很多人一想到“多选”就去翻 select 标签，加 multiple 属性——但那是下拉多选，视觉和交互都完全不同。真正做平铺式、可同时看到全部选项的多选，就得用 input[type="checkbox"]。它语义正确、无障碍支持好、JS 读取方便，而且不需要任何 JS 就能提交数据。
常见错误包括：
- 把
multiple写在input上（input根本不支持这个属性） - 只写
id不写name，导致后端收不到字段 - 漏掉
value，勾选后提交的全是"on"，根本分不清是哪个选项
让多个 checkbox 共享 name 并被后端识别为数组
如果希望后端一次性拿到所有勾选项（比如 Python Flask 的 request.form.getlist("hobbies")），前端的 name 必须一致。但要注意框架差异：
- PHP 默认认
name="hobbies[]"这种带方括号的写法，解析成数组 - Node.js +
body-parser默认只取第一个同名值，得配置extended: true或改用name="hobbies"+ 手动解析 - Flask 和 Django 通常直接支持
name="hobbies"，用getlist()或getlist()方法取
务必打开浏览器开发者工具 → Network → Payload，确认发出的数据键名和值是否符合预期。别信 HTML 里写了什么，要看实际发了什么。
CSS Grid 实现四列自动对齐最稳
用 float 或 inline-block 做多列，容易因文本长度不一或数量不足导致错行、留白、垂直不对齐。CSS Grid 是目前最干净的解法：
- 给包裹所有
checkbox-item的容器加display: grid - 用
grid-template-columns: repeat(4, 1fr)定义四等宽列 - 加
gap: 0.5rem控制间距，比margin更可控 - 每个
checkbox-item是一个div，里面包input+label，别把input直接丢进 grid 容器里
示例片段：
.checkbox-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
}
.checkbox-item {
display: flex;
align-items: center;
gap: 0.25rem;
}
JS 读取时一定要加 :checked 过滤
想用 JS 收集当前勾选的值，别这么写：
document.querySelectorAll('input[type="checkbox"]')
这会拿到全部 checkbox，包括没勾的。正确写法是：
document.querySelectorAll('input[type="checkbox"]:checked')
另外注意两个易忽略点：
-
checked是属性（property），不是属性（attribute）；JS 设置el.checked = true不会触发change事件，要手动dispatchEvent才能联动校验逻辑 - 批量操作别用
getElementsByName（返回的是类数组，不支持forEach），统一用querySelectorAll+forEach
真正麻烦的从来不是怎么排版，而是 name 怎么命名、JS 怎么取值、后端怎么解析这三者没对齐——只要其中一环出错，整个多选就“看起来选了，其实没传过去”。
