radio按钮不互斥因name属性不一致；label未绑定导致点击文字无效；默认选中用checked而非defaultChecked；获取值应直接查:checked伪类并判空。
radio 按钮不互斥？检查 name 属性是否一致
html 单选按钮（<input type="radio">）能互斥选择的前提，是同一组内的所有按钮共享完全相同的 name 值。浏览器只认 name，不看 id、class 或位置关系。
常见错误现象：
– 点击一个 radio，其他同组选项没取消
– 控制台无报错，但表单提交时只拿到最后一个选中的值
– 使用 JS 获取 document.querySelectorAll('input[name="xxx"]') 返回空数组或数量不对
-
name值必须严格相等：大小写、空格、引号类型（双引号/单引号）都要一致 - 不同分组必须用不同
name，比如用户性别用name="gender"，订阅偏好用name="newsletter" - 不要依赖
id实现分组——id只用于锚点或 JS 定位，对 radio 行为零影响
label 标签没绑定？点击文字无法触发选择
用户习惯点击文字选中 radio，但若 <label> 和 <input> 之间没建立关联，点击就无效。这不是 bug，是 HTML 规范行为。
使用场景：
– 表单可访问性要求（屏幕阅读器依赖 label 关联）
– 移动端触控面积太小，纯 input 点击困难
- 推荐写法：把
<input>包在<label>内，无需for和id<label><input type="radio" name="theme" value="dark"> 深色模式</label>
- 备选写法：用
for属性绑定id，此时id必须唯一且与for值完全匹配 - 避免写法：label 和 input 分开、无任何关联；或多个 radio 共用同一个
id（违反 HTML 唯一性）
初始状态怎么设默认选中？用 checked 而非 defaultChecked
HTML 中设置默认选中项，只用 checked 属性。JS 动态操作时才涉及 defaultChecked，它只是反映初始 HTML 是否写了 checked，不能用来切换状态。
立即学习“前端免费学习笔记（深入）”；
性能 / 兼容性影响：
– checked 是布尔属性，写上即生效，无需 checked="true"
– 服务端渲染或静态 HTML 场景下，漏掉 checked 就没有默认值
- 正确写法：
<input type="radio" name="size" value="m" checked> - 错误写法：
<input type="radio" name="size" value="m" checked="true">（冗余，部分旧浏览器可能误判） - JS 修改时用
element.checked = true，不是element.defaultChecked = true
获取选中值总为空？别遍历所有 radio
直接查 document.querySelector('input[name="xxx"]:checked') 最快最稳。遍历所有再判断 checked 是典型低效写法，还容易漏处理 null。
常见错误现象：
– JS 报错 Cannot read property 'value' of null
– 表单提交前校验时，始终拿不到值，尤其当用户还没点过任何选项
- 安全获取方式：
const selected = document.querySelector('input[name="plan"]:checked');<br>const value = selected ? selected.value : null; - 注意：CSS 伪类
:checked在 IE8+ 支持良好，无需 polyfill - 如果后端要求“未选时传空字符串”，记得手动 fallback，因为
selected为 null 时不会自动转成空串
name 属性拼错、label 绑定失效、checked 写法多余、JS 查询没判空——这四点占了 radio 实际问题的八成。细节看着琐碎，但改完立刻见效。
