复选框必须设置name属性且同组值相同，value需显式指定，用label扩大点击区域，JS获取选中值需querySelectorAll+ :checked + Array.from，提交前检查name、disabled及使用FormData。
复选框的 <input type="checkbox"> 基本写法
HTML5 中复选框没有新语法，还是用老老实实的 <input type="checkbox">。关键不是“怎么写”，而是“怎么写对”——很多人漏掉 name 或乱用 value，导致后端收不到数据。
-
name属性必须有，且多个同组复选框要共用同一个name（例如name="hobby"），否则提交时不会被当一组处理 -
value是提交时实际发送的值，不写默认为"on"，但别依赖它——务必显式设置，比如value="reading" - 勾选状态由
checked属性控制（布尔属性），写上即默认选中：<input type="checkbox" name="hobby" value="swimming" checked>
让复选框可点击区域变大：必须配 <label>
只放 <input>，用户只能精准点中那个小方框，体验极差。正确做法是用 <label> 包裹或关联：
<label> <input type="checkbox" name="notify" value="email"> 邮件通知 </label>
或者用 for 显式绑定（此时 id 必须匹配）：
<input type="checkbox" id="sms" name="notify" value="sms"> <label for="sms">短信通知</label>
没加 <label> 的复选框，在移动端基本等于不可用。
立即学习“前端免费学习笔记（深入）”；
获取多个选中值：JavaScript 怎么取 name="xxx" 的所有勾选项
不能用 document.querySelector('input[name="hobby"]') ——那只会拿到第一个。得用 querySelectorAll 配合过滤：
const checkedHobbies = Array.from(
document.querySelectorAll('input[name="hobby"]:checked')
).map(cb => cb.value);
注意点：
-
:checked伪类必须带上，否则会拿到全部复选框（包括未选中的） -
querySelectorAll返回的是NodeList，不是数组，所以要用Array.from()或展开运算符转成数组才能用map - 如果一个都没选，
checkedHobbies就是空数组[]，后端通常也接受空数组或忽略该字段
表单提交时后端收不到复选框数据？先查这三件事
这是最常被卡住的地方，问题往往不在 HTML 写法本身：
- 确认所有复选框都有
name，且值完全一致（大小写、空格、下划线都算不同 name） - 检查是否用了
disabled—— 被禁用的复选框不会随表单提交，哪怕它被勾选了 - 如果是 AJAX 提交，别直接序列化整个表单再手动拼 JSON；用
FormData最稳妥：const formData = new FormData(formEl); // 复选框会自动按 name 归组，同名多个值也会正确保留
复选框的“存在感”很弱，但它的行为逻辑（比如不勾就不传、同名多值、默认 value 是 on）恰恰是出错高发区。写完务必用浏览器开发者工具的 Network 标签看实际发出的请求体。
