HTML5如何制作复选框_HTML5制作复选框教程【实践】

复选框必须设置name属性且同组值相同，value需显式指定，用label扩大点击区域，js获取选中值需querySelectorAll+ :checked + Array.from，提交前检查name、disabled及使用formData。

复选框的 基本写法

html5 中复选框没有新语法，还是用老老实实的 。关键不是“怎么写”，而是“怎么写对”——很多人漏掉 name 或乱用 value，导致后端收不到数据。

• name 属性必须有，且多个同组复选框要共用同一个 name（例如 name="hobby"），否则提交时不会被当一组处理
• value 是提交时实际发送的值，不写默认为 "on"，但别依赖它——务必显式设置，比如 value="reading"
• 勾选状态由 checked 属性控制（布尔属性），写上即默认选中：

让复选框可点击区域变大：必须配

只放 ，用户只能精准点中那个小方框，体验极差。正确做法是用 包裹或关联：

      邮件通知 

或者用 for 显式绑定（此时 id 必须匹配）：

 短信通知

没加 的复选框，在移动端基本等于不可用。

立即学习“前端免费学习笔记（深入）”；

获取多个选中值：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 标签看实际发出的请求体。