复选框（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> 包裹提升可用性与可访问性
直接点击文字不能触发 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 对动态插入支持差，现代项目基本不用考虑。
