单选按钮组靠 name 属性隔离，同名即一组、互斥；name 必须唯一且语义清晰，id 可不同；label 需正确关联 radio（for=id 或包裹写法）；JS 获取值应使用 querySelector('input[name="xxx"]:checked') 并判空。
单选按钮组靠 name 属性隔离
HTML 单选按钮（<input type="radio">）是否互斥，只取决于它们的 name 属性值是否相同。同名即一组，选中一个会自动取消同组其他选项；不同名就是完全独立的组，互不影响。
常见错误是复制粘贴时忘了改 name，比如两组性别选择都用了 name="gender"，结果点第二组的“女”会把第一组刚选的“男”也取消。
- 每组单选按钮必须使用唯一且语义清晰的
name，例如name="user_role"、name="notification_preference" - 不要用动态生成的随机字符串（如
name="radio_123"），否则 JS 后续取值困难，也不利于表单序列化 -
id可以各不相同，但name才是分组的唯一依据
label 与 radio 关联错误导致点击失效
用户点击 <label> 本应等效于点击对应单选按钮，但如果 for 属性和 id 不匹配，或直接包裹写法出错，就会出现“看着像单选组，实际点 label 没反应”，让人误以为分组冲突。
正确写法有两种：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
<input type="radio" id="opt_a" name="plan" value="basic"> <label for="opt_a">基础版</label> <p><!-- 或直接包裹 --> <label> <input type="radio" name="plan" value="pro"> 专业版 </label>
- 用
for时，for值必须严格等于目标input的id（区分大小写、不可含空格） - 包裹写法更安全，但注意不能嵌套其他交互元素（如再包一层
<button>） - 如果用了 JS 动态插入 radio，记得同步设置
id和for，否则 label 失效
JavaScript 获取单选组值时踩的坑
用 document.querySelector('input[name="xxx"]:checked') 是最稳妥的方式。别用 getElementById 或遍历所有 input，容易拿错组或漏掉未选中的情况。
- 没选中时返回
null，必须判空，否则.value报Cannot read property 'value' of null - 用
querySelectorAll('input[name="xxx"]')遍历时，别假设第一个就是选中项——得自己检查checked属性 - 如果页面有多个同名 radio（比如通过模板重复渲染），确保它们确属同一逻辑组；否则应主动加命名空间，如
name="form1_payment_method"和name="form2_payment_method"
Vue/React 等框架中 name 冲突更隐蔽
在组件化场景下，多个相同子组件同时渲染，若内部 radio 的 name 写死（如 name="status"），就会跨实例形成意外分组。用户在组件 A 选了“启用”，组件 B 的“禁用”就自动取消了。
- 动态绑定
name，比如 Vue 中用:name="`status_${props.id}`"，React 中用name={`status-${props.id}`} - 避免在循环列表中直接写死
name，尤其当列表项可增删时，name 必须带唯一标识 - 服务端渲染（SSR）+ 客户端水合（hydration）时，若前后端
name生成逻辑不一致，可能触发 DOM mismatch，导致初始选中态丢失
name 属性看着简单，但它既是浏览器原生行为的开关，也是跨框架、跨组件边界的隐性耦合点。只要有一个地方漏掉唯一性约束，整组行为就不可控。
