单选框不互斥主因是name属性拼写不一致；checked为布尔属性，存在即生效；label需显式for绑定；radio须有value且在form内；提交依赖name、value、checked、required和label五要素。
单选框不互斥，基本就是 name 属性写错了——大小写、空格、引号类型、下划线位置，差一点，浏览器就当它是另一组。
radio 分组失效？只看 name 是否完全一致
浏览器对 radio 分组的判断极其机械：只比对 name 属性字符串是否字面量相等，其余一概不认。id、class、DOM 位置、CSS 样式，全无影响。
- 错误示例：
<input type="radio" name="theme">和<input type="radio" name="Theme">→ 两组独立控件，可同时选中 - 错误示例：
name="user-type"和name="user_type"→ 不同组，提交时字段名不一致，后端收不到 - 正确做法：统一用小写 + 短横线，如
name="payment_method"，前后端共用同一命名 - 调试技巧：在控制台运行
document.querySelectorAll('input[name="xxx"]')，看返回节点数是否符合预期；若为 0 或数量不对，先查name拼写
默认选中不生效？checked 是布尔属性，不是字符串
checked 只要存在就生效，值是什么根本不解析。写成 checked="false" 或 checked=""，结果还是选中——这不是 bug，是规范行为。
- ✅ 正确：
<input type="radio" name="lang" value="js" checked> - ❌ 错误：
<input type="radio" name="lang" value="py" checked="0">（仍被选中） - ❌ 错误：
<input type="radio" name="lang" value="ts" checked="true">（仍被选中） - 动态设置 JS 时，用
el.checked = true，别用el.setAttribute('checked', 'true')，后者在旧 Safari 中可能不触发表单逻辑 - 同一组里多个
checked，浏览器通常以最后一个为准，但这是未定义行为，应主动避免
用户点不中？label 绑定方式决定点击热区大小
单纯把 <input> 套进 <label> 看似省事，但在 flex 布局、重置样式或移动端缩放下容易失效。显式绑定更可靠。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：给每个 radio 设唯一
id，再用label的for属性指向它，例如<input id="opt_a" name="size" value="m"><label for="opt_a">中号</label> - 避免写法：多个 radio 共用同一个
id（违反 HTML 规范），或 label 和 input 完全分离无关联 - 隐藏原生 radio 时，别用
display: none—— 这会让 label 失效；改用position: absolute; opacity: 0; width: 1px; height: 1px;等可访问性友好的方案 - 移动端尤其要注意：纯 input 默认尺寸太小，必须靠 label 扩大热区，否则触控失败率高
表单提交没值？检查 value、required 和上下文
radio 提交的是 value，但前提是它被选中，且整个流程没被截断。常见漏点不在标签本身，而在上下文约束。
- 每个 radio 必须有显式的
value，漏写会导致提交空字符串""，后端难区分“未选”和“选了空值” - “必填”靠
required，不是靠name相同——只给组内任意一个 radio 加required即可，浏览器自动校验整组 - 确保 radio 在
<form>标签内，否则不会随 form 提交；若用 JS 提交，需手动收集document.querySelector('input[name="xxx"]:checked')?.value - 调试时打开 Network → Payload，确认发出的参数里是否有对应
name字段；没有，说明没选中、name写错，或 JS 阻止了默认行为却没补数据
name 拼写、checked 存在性、label 显式绑定、value 必填、required 显式声明——这五点任何一处出偏差，都会让 radio 表现异常。它们看起来琐碎，但每一条都是浏览器按字面量执行的硬规则，没法取巧。
