单选按钮组实现唯一选择需满足四点：name属性严格一致、value值合法且不重复、label正确关联提升可点击性、JS读取时判空处理；缺一不可。
单选按钮组能实现唯一性选择，前提是 name 属性完全一致；否则浏览器根本不认为它们是一组，点几个都算选中。
name 值必须严格相同才能互斥
浏览器只靠 name 字符串是否完全相等来判断哪些 <input type="radio"> 属于同一组。大小写、空格、下划线/短横线混用都会导致分组失败。
- 错误写法：
<input type="radio" name="Color" value="red">和<input type="radio" name="color" value="blue">—— 实际是两组独立控件 - 拼错更常见：比如
theme写成them或Theme，动态渲染时模板变量污染（如name="opt_{{id}}"）也会让每个 radio 的name都不同 - 不同逻辑组必须用不同
name：例如“颜色”用name="color"，“尺寸”用name="size"，否则用户在两个维度上只能选一个，功能错乱
value 不是显示文本，而是提交值
value 是表单提交或 JS 读取时实际拿到的字符串，它不会出现在界面上。中文、空格、特殊字符会引发编码、解析、截断等问题。
- 避免
value="男"或value="微信支付"：URL 编码后可能变成%E7%94%B7，后端 JSON 解析失败，数据库字段长度不够 - 不要省略
value：浏览器默认发on，所有未设value的 radio 提交后都是gender=on，无法区分选项 - 多个 radio 用相同
value虽然能互斥，但提交后无法知道用户到底点了哪个 —— 比如全设成value="1"就没意义 - 推荐写法：
value="light"/value="dark"、value="public"/value="private"、value="1"/value="0"
label 不只是好看，不写就点不准
原生 radio 的点击热区极小（通常 12–16px），移动端手指根本点不中。没有正确关联 label，等于功能缺失，不是体验差。
- 包裹式最可靠：
<label><input type="radio" name="mode" value="auto"> 自动模式</label> - for+id 式仅限结构受限时用：
<input id="m1" type="radio" name="mode" value="manual"><label for="m1">手动模式</label>，注意id必须唯一且拼写零误差 - 禁用
display: none隐藏原生 radio：iOS Safari 的change事件可能不触发，屏幕阅读器也会跳过
JS 读取时 null 是常态，不是 bug
document.querySelector('input[name="plan"]:checked') 在没人选中时返回 null，不是 undefined。直接链式调用 .value 会报 Cannot read property 'value' of null。
- 安全读法：
const selected = document.querySelector('input[name="plan"]:checked'); const planValue = selected ? selected.value : ''; - 别用
getElementsByName配循环遍历判断 —— 多余且易错 - 别假设一定有默认选中：用户可能还没操作，或者你忘了加
checked属性 - 如果业务要求“必选”，得配合表单验证或前端校验逻辑，HTML 的
required对 radio 组有效，但仅当至少一个有checked时才真正起作用
name 一致、value 合法、label 可点、JS 判空——这四点漏掉任意一个，单选按钮组就可能在某个环节失效。最容易被忽略的是动态渲染时 name 被模板变量悄悄改掉，以及把中文当 value 用。
