复选框（checkbox）允许多选，单选框（radio）强制单选；核心区别在于name属性：同名radio构成互斥组，同名checkbox则无互斥关系，且均需正确设置value以确保表单提交预期值。

HTML 中 <input type="checkbox"> 和 <input type="radio"> 的本质区别

复选框（checkbox）允许多个同时选中，单选按钮（radio）必须同名才能实现“多选一”——这是最常被忽略的前提。浏览器只根据 name 属性值是否相同来判断一组 radio 是否互斥，跟位置、容器、标签文字都无关。

常见错误现象：radio 点击后仍可多选 → 检查所有同组项的 name 值是否完全一致（包括大小写和空格）；checkbox 无法单独控制 → 确保每个都有独立的 name 或使用数组式命名（如 name="feature[]"）便于后端接收。

用 name 和 value 控制表单提交行为

checkbox 默认不提交未勾选的字段；勾选后提交的是 name=value 键值对。若没设 value，默认提交 on —— 这通常不是你想要的。

radio 只提交当前选中项的 name=value，未选中项完全不参与提交。所以必须至少有一个带 checked，否则整组无值提交。

• <input type="checkbox" name="notify" value="email"> 提交时：有勾选 → notify=email；无勾选 → 字段不出现
• <input type="radio" name="theme" value="dark"> 和 <input type="radio" name="theme" value="light"> → 同时只能提交一个 theme=xxx
• 后端接收 checkbox 多值时，注意解析方式：PHP 自动转为数组，Node.js 需手动处理重复键名

用 <label></label> 包裹提升可用性与可访问性

直接点击文字不能触发 checkbox 或 radio？大概率没正确关联 label。推荐用包裹法，比 for/id 更可靠、更少出错。

<label>
  <input type="checkbox" name="agree" value="1"> 我已阅读并同意条款
</label>

<label>
  <input type="radio" name="size" value="m"> 中号
</label>

这样点击文字或框本身都能触发，屏幕阅读器也能正确读出关联文本。不用额外写 JS，也不依赖 CSS cursor: pointer 的视觉提示。

JavaScript 动态操作时注意 checked 状态的读写逻辑

JS 中读取 checked 属性要用 .checked（布尔值），不是 .value；设置也一样。混淆会导致状态不同步。

常见坑：document.querySelector('input[name="opt"]').value 拿到的是字符串值，不是是否选中；而 document.querySelectorAll('input[name="tags"]:checked') 才能批量获取所有已勾选的 checkbox 元素。

• 设单个 radio 为选中：elem.checked = true（注意：仅当它和同组其他项 name 一致才生效）
• 清空整组 radio：document.querySelectorAll('input[name="group"]').forEach(i => i.checked = false)
• 获取所有选中 checkbox 的 value：[...document.querySelectorAll('input[type="checkbox"]:checked')].map(i => i.value)

复杂点在于：如果页面通过 JS 动态插入新 radio，必须确保它的 name 与原组一致，且插入后无需额外初始化 —— 浏览器会自动纳入原有互斥逻辑。但旧版 IE 对动态插入支持差，现代项目基本不用考虑。