radio单选框互斥仅取决于name属性完全一致，大小写、空格、符号均需严格匹配；label须正确绑定id，JS获取值前必须判空，自定义样式需用appearance:none配合伪元素。
radio 单选框能正常互斥，只取决于 name 属性是否完全一致——其他任何属性写错、漏写或拼错，都会导致“看起来像单选，实际能多选”。
name 属性必须严格一致才能单选
浏览器不看 id、不看文字内容、也不看 DOM 位置，只靠 name 值做分组。哪怕只是大小写不同（如 gender 和 Gender），它们就被视为两组，可同时选中。
- 正确写法：
和 - 常见错误：漏写
name、拼错（planne）、混用连字符/下划线（payment-methodvspayment_method） - 调试技巧：打开 DevTools，选中任意 radio，检查其
name值，再对比同组其他项——必须一字不差
label 绑定失效的三种典型场景
点文字无法选中 radio，90% 是 label 和 input 没真正关联上。不是写了 for 就一定生效。
-
for值与id不匹配：比如对应的input却没写id="age"，或写了id="AGE"（大小写敏感） - 用了隐式包裹但结构出错：如
是有效的；但若中间插入了或换行符，某些旧浏览器可能中断绑定 -
id重复或含非法字符：如id="user.name"或id="1st-option"，部分 JS 库或 CSS 选择器会解析失败
JS 获取选中值时的空值陷阱
document.querySelector('input[name="theme"]:checked') 返回 null 是常态，不是异常——用户还没选，或表单重置后无默认项。
- 别直接链式取值：
document.querySelector('input[name="theme"]:checked').value会报Cannot read property 'value' of null - 安全写法：先判空，再取值，例如
const el = document.querySelector('input[name="theme"]:checked'); const val = el ? el.value : ''; - 监听变化优先用
change而非click：radio 的change事件只在真正切换状态时触发，更可靠 - 服务端返回数据预设选中？模板渲染时只对匹配值的那个 radio 输出
checked，不要靠 JS 后补——避免闪动和竞态
自定义样式绕不开 appearance: none + 手动绘制
想改圆点大小、颜色或加动画？直接给 input[type="radio"] 加 border-radius 或 background 基本无效，尤其在 Safari 和旧版 Android WebView 中。
- 现代方案：用
appearance: none清除原生样式，再手动定义width、height、border和伪元素::after表示选中态 - 兼容 IE11 / Android 4.4：必须用
position: absolute; opacity: 0; pointer-events: none;彻底隐藏原生控件，所有视觉都由label::before和label::after承担 - 关键细节：
vertical-align: middle几乎必加，否则 radio 图标和文字基线错位；clip-path可作为border-radius在 Safari 中失效时的圆角备用方案
name 一致是底线，label 绑定是体验分水岭，JS 判空是防崩基本功，而自定义样式本质是“藏真身、画假面”——四个环节里任一松动，单选逻辑就可能在某个浏览器或某个用户操作路径里悄悄失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
