合格的多选题需用独立checkbox配label绑定、统一name、显式value；后端须正确解析数组，js应queryselectall:checked安全取值，并处理indeterminate等交互细节。
HTML 本身没有“多选题组件”这个内置概念，所谓多选题，就是一组可独立勾选的 <input type="checkbox">，靠 name 约定分组、靠 value 区分选项、靠 JS 控制逻辑约束。别被“组件”二字带偏——原生实现简单，但细节一错，后端收不到数据、屏幕阅读器读不懂、用户点了没反应，全是坑。
怎么写 checkbox 才算合格的多选题选项
每个选项必须是独立的 <input type="checkbox">，不能用 <select multiple></select>（那是下拉多选，语义和交互完全不同）。
- 必须配
<label></label>，且用for属性绑定id；只靠视觉对齐或包裹写法（<label><input>文本</label>）在部分旧浏览器或辅助技术中不可靠 -
name值要一致（如name="q2"），但不是强制要求——JS 获取时更依赖 class 或选择器，后端才真正在意 name -
value必须显式写，不能留空或用中文；否则提交值是默认的"on"，后端无法区分“运动”和“阅读” - 绝对不要给多个 checkbox 写同一个
id；document.getElementById只返回第一个，JS 逻辑直接崩
为什么后端只收到一个值或收不到任何值
常见错误不是代码写错，而是前后端约定断层。
- 前端
name="hobbies"，后端用request.form.get("hobbies")（Flask）或$_POST["hobbies"]（PHP）——这只能取第一个勾选项；得改用getlist()或$_POST["hobbies"]配合正确解析配置 - Node.js +
body-parser默认不把同名 checkbox 解析为数组，需启用extended: true或改用name="hobbies[]" - 表单里混用了
disabled和hidden：disabled 的 checkbox 根本不提交；要隐藏又保留值，得加一个<input type="hidden" name="hobbies" value="xxx"> - 用户一个没选，后端收到空字符串、
null或undefined，而验证逻辑只检查if (val)，结果绕过校验
怎么用 JS 安全获取所有已选 value
别信 document.forms[0].elements 或 getElementsByName——它们返回的 NodeList 不支持 forEach，且可能包含非 checkbox 元素。
- 用
document.querySelectorAll('input[name="q2"]:checked')最稳，过滤干净，直接拿到 DOM 节点列表 - 遍历时用
for...of或传统for循环，别用for...in（会遍历原型链） - 取值统一用
elem.value，别用elem.getAttribute("value")（后者返回 HTML 初始值，不反映实时勾选状态） - 如果要支持“至少选两项”，得手动统计：
document.querySelectorAll('input[name="q2"]:checked').length >= 2
全选/反选逻辑最容易漏掉的点
主 checkbox 的 indeterminate 状态不是自动更新的，它不触发 change 事件，但用户能看见——不处理，UI 就会“看起来不对劲”。
- 子项变更时，必须重算已勾选项数量，再设
mainCheckbox.checked = count === total和mainCheckbox.indeterminate = count > 0 && count - 主 checkbox 的
click事件里，只设子项checked，别忘了同步清除indeterminate（设为false） - 动态插入新选项后，记得重新绑定事件或用事件委托，否则新增项不响应全选
- 移动端点击区域小，
<label></label>没包住或没用for，会导致点文字没反应——这是真实发生过的线上问题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
