单选按钮互斥仅取决于name属性完全一致——大小写、连字符、空格均需逐字相同；其他属性、dom位置、css或js均不影响原生互斥逻辑。
单选按钮互斥不是靠 JS 控制、不是靠 CSS 样式、也不是靠 DOM 位置，**只取决于 name 属性是否完全一致**——漏一个字母、大小写错、多一个空格，就失效。
name 属性必须逐字相同（含大小写、连字符、数字）
浏览器不关心你把按钮放在同一个 <tr> 里还是跨了三个 <code><div>，只比对 <code>name 字符串。哪怕其他属性全一样，name="userType" 和 name="usertype" 就是两组独立按钮。
- ✅ 正确：
name="paymentMethod"出现在所有同组<input type="radio">上 - ❌ 错误：
name="payment"、name="payment_method"、name="PaymentMethod"—— 这些互不干扰，全可同时选中 - ⚠️ 特别注意动态生成场景：JS 拼接
name时变量未定义，结果变成name=""，浏览器视作无分组，等同于每个按钮自成一组
不要用 id 或 class 替代 name 实现互斥
id 是唯一标识，class 是样式/批量操作标记，它们对原生互斥行为 **零影响**。有人试图用 JS 监听 click 然后手动清空其他项，这不仅多余，还容易出错（比如没处理表单重置、没兼容键盘操作、重复触发）。
- 浏览器原生互斥逻辑在
change事件前就已完成，无需 JS 干预 - 若强行用 JS 模拟互斥，必须监听
change而非click，否则用户反复点同一选项也会触发逻辑 - 用
querySelector('input[name="xxx"]:checked')获取当前值，比遍历所有 radio 更可靠
value 值要唯一，label 要一对一绑定
value 不影响互斥，但决定提交内容；label 不绑定好，会影响可访问性和点击热区。
-
value必须在同组内唯一，否则后端无法区分选项（例如两个value="1"的按钮，提交后只拿到一个1，但不知道来自哪一项） -
label必须通过for属性或包裹方式与对应input关联，否则点击文字不会触发选中 - 默认选中用
checked属性写在 HTML 中，不要靠 JS 设置——DOM 渲染完再执行 JS 可能有竞态，且 SSR/SEO 场景下不可见
required 属性只需加在任意一个同名 radio 上
表单校验层面，“必选”是按组生效的。只要同组中有一个 radio 带 required，整个组就变成必填项；用户不选任何一项，提交时会触发浏览器原生提示。
- ✅ 只需写：
<input type="radio" name="theme" value="dark" required> - ❌ 不需要每个都加
required，也不会因为其他没加就失效 - ⚠️ 注意：如果整组初始都没设
checked，又加了required，用户第一次打开表单时该组就是“未填写”状态
真正卡住人的从来不是怎么写 <input type="radio">，而是改完 HTML 后发现“还是能多选”——十次有九次是 name 没对齐，剩下一次是用了 id 当 name 用，或者动态渲染时字符串拼错了。
