复选框必须设置相同name和显式value才能被正确识别；js应遍历:checked获取值；后端需按“收到即选中”处理；须用label关联并保障可访问性。
复选框的 HTML 基础写法
复选框不是靠单个 <input type="checkbox"> 独立工作的，它必须配合 name 和 value 才能被后端或 JS 正确识别。只写 <input type="checkbox"> 会导致提交时无值、JS 获取不到状态。
常见错误现象：document.querySelector('input[type="checkbox"]').checked 能读，但表单提交后后端收不到数据，或多个复选框提交时只收到一个值。
-
name属性必须相同（如name="hobby"），才能让浏览器把它们归为一组 -
value必须显式设置（如value="reading"），否则默认是"on"，无法区分具体选项 - 加
checked属性表示默认选中（<input type="checkbox" checked>），不加则默认未选
用 JavaScript 获取所有选中的复选框值
直接遍历 document.querySelectorAll('input[type="checkbox"]:checked') 是最稳妥的方式，比监听单个 change 事件再拼数组更可靠——尤其当页面有动态增删复选框时。
注意：不要依赖 form.elements["hobby"] 返回的集合，它在多选场景下行为不一致（IE/旧版 Safari 可能只返回第一个）。
- 推荐写法：
const selected = Array.from( document.querySelectorAll('input[name="hobby"]:checked') ).map(cb => cb.value); - 如果用 jQuery，
$('input[name="hobby"]:checked').val()只返回第一个值，得用.map().get() - 避免用
for...in遍历 checkbox NodeList，容易误读原型属性
后端接收复选框数据的常见陷阱
浏览器提交时，**未选中的复选框根本不会出现在请求体中**，所以后端不能假设“没收到某 value 就等于 false”，而应以“收到的才是 true”为逻辑起点。
不同语言处理方式差异大：
- PHP：
$_POST["hobby"]是数组，但前提是 HTML 中所有复选框都带name="hobby[]"（末尾方括号） - Node.js（Express）：需启用
urlencoded({ extended: true })，否则req.body.hobby可能是字符串而非数组 - Python Flask：
request.form.getlist("hobby")是标准做法，request.form["hobby"]只取第一个
样式与可访问性不能只靠 CSS 自定义
纯用 appearance: none 隐藏原生复选框再画个伪元素，会破坏屏幕阅读器支持和键盘导航（比如按空格键无法切换）。必须保留原生 <input> 并用 label 显式关联。
- 正确结构：
<input type="checkbox" id="hobby1" name="hobby" value="reading"><label for="hobby1">阅读</label> - 若用伪元素模拟勾选状态，需同步控制
aria-checked属性，并监听change更新 - 移动端点击区域太小（尤其 iOS）：给
label加padding或设min-height，别只靠 input 的尺寸
