怎么用 <input type="checkbox"> 实现多选
html 多选框本质就是多个独立的 <input type="checkbox"> 元素，它们共享同一个 name 属性值（可选），但各自有独立的 value。提交时，只有被勾选的那些会把 value 发送到服务器。
常见错误是以为必须加 multiple 属性——其实 <input> 没有这个属性，那是 <select></select> 用的。
-
name可以相同（方便后端接收为数组），也可以不同（适合做独立开关） - 每个
<input>必须配一个<label></label>（推荐用for关联或包裹方式），否则点击文字无法触发勾选 - 别漏写
value：不写的话，勾选后提交的值默认是"on"，几乎没法区分是哪个选项
为什么勾选了却收不到数据？
最常踩的坑是表单提交逻辑没对上：后端只取 request.form.getlist("xxx")（flask）或 $_POST["xxx"]（PHP），但前端 name 写错了、拼错了，或者用了 id 当 name。
另一个隐蔽问题是：多个 checkbox 的 name 完全一致，但后端框架（比如 express + body-parser）默认只取第一个值，得手动配置支持数组解析，或改用 name="hobbies[]" 这种带方括号的命名（PHP/Node.js 常见约定）。
立即学习“前端免费学习笔记（深入）”；
- 检查浏览器开发者工具的 Network → Payload，确认发送的键名和值是否符合预期
- 避免空格或特殊字符出现在
name中，如name="user interests"会导致解析失败 - 如果用 JS 动态收集值，别用
document.querySelectorAll('input[type=checkbox]')然后遍历所有——要加:checked过滤：document.querySelectorAll('input[type=checkbox]:checked')
checked 属性和 JS 控制的区别
checked 是初始状态，写在 HTML 里就代表页面加载时默认勾选；而 JS 设置 elem.checked = true 是运行时控制，两者互不影响初始渲染。
容易混淆的是：JS 改变 checked 属性后，不会触发 change 事件，除非手动 .dispatchEvent(new Event('change'))。这对依赖事件更新 ui 或校验逻辑的场景很关键。
- 设置默认选中：直接写
<input type="checkbox" name="agree" value="1" checked> - 用 JS 切换状态：
checkboxEl.checked = !checkboxEl.checked，比操作setAttribute更可靠 - 批量操作时，别用
getElementsByName（返回 NodeList 不支持 foreach），改用querySelectorAll+forEach
跟 <select multiple></select> 比有什么实际差别？
视觉和交互完全不同：checkbox 是平铺的、可同时看到全部选项；<select multiple></select> 默认只显示一行，用户得按住 Ctrl/Command 才能多选，移动端体验更差。
语义上，checkbox 表达“从零到多”的任意组合（比如兴趣标签），<select multiple></select> 更适合“从固定列表中挑若干项”的结构化数据（比如分配多个负责人）。浏览器对两者的表单序列化行为也不同：前者发多个同名字段，后者发一个带逗号分隔的字段（取决于实现）。
- 别为了“看起来像下拉”硬套
<select multiple></select>—— 用户根本不知道要按 Ctrl - 如果选项超过 5–6 个，考虑用搜索+多选组件（如 Select2），原生
checkbox会拉长页面 - 无障碍方面，
checkbox组合必须包在<fieldset></fieldset>+<legend></legend>里，否则屏幕阅读器无法理解上下文
事情说清了就结束。真正麻烦的不是写法，而是前后端对“同名多值”的约定是否一致，以及是否忘了给每个选项配 value。