单选按钮互斥依赖name属性完全一致，而非JavaScript控制；name必须严格相同（区分大小写、空格及不可见字符），不同组需不同name，动态生成时易出错，label的for应匹配id而非name。
单选效果不是靠 JavaScript 控制的，而是浏览器原生行为——只要 name 相同，就自动互斥。关键不是“怎么实现”，而是“怎么写对 name”。
同一组单选按钮必须共用完全相同的 name 值
浏览器只认 name 字符串是否完全一致（区分大小写、空格、不可见字符）。哪怕只是多一个空格或大小写不同，就会被当成两组独立按钮。
-
name="gender"和name="Gender"→ 两组，可同时选中 -
name="color"和name=" color"（开头有空格）→ 两组，互不干扰 - 不同表单区域要用不同
name，比如name="theme"和name="language"不能混用
为什么点了两个还能同时选中？检查这三点
常见“失效”现象其实是 name 没写对，而不是浏览器坏了。
- 复制粘贴时带了全角空格或不可见 Unicode 字符（如
\u200b），肉眼难辨 - 前后端模板拼接导致
name动态生成出错，比如name="{{ group }}_option"渲染后变成name="user_option"和name="admin_option" - 用 JavaScript 动态插入时漏写了
name属性，或者赋值为undefined或空字符串
name 和 id 的分工必须清楚
name 管分组逻辑，id 管标签绑定和 JS 查找——两者不能互相替代。
立即学习“前端免费学习笔记（深入）”；
-
label的for属性必须匹配input的id，不是name - JS 获取选中值时，通常用
document.querySelector('input[name="xxx"]:checked')，靠name定位组，靠:checked找状态 - 后端接收数据时，只看
name对应的 value，根本不知道id是什么
最容易被忽略的点：同一页面多个相同功能的单选组（比如商品列表每行都有“规格选择”），name 必须带唯一上下文标识，否则所有行共用一组，点第一行会取消最后一行的选中——这不是 bug，是 name 写得太“通用”了。
