单选按钮无法互斥选择，90%是name属性不一致或缺失导致的；name必须完全相同（含大小写、无空格），浏览器仅凭name判断分组，与id、class、位置无关。
单选按钮无法互斥选择，90% 是 name 属性不一致或缺失导致的，不是 JS 或 CSS 问题。
name 属性必须完全相同（含大小写、无空格）
浏览器只靠 name 判断是否属于同一组。哪怕一个写 name="gender"，另一个写 name="Gender" 或 name=" gender"，它们就被当成两组独立控件。
- ✅ 正确：
<input type="radio" name="theme" value="dark">和<input type="radio" name="theme" value="light"> - ❌ 错误：
name="theme"与name="Theme"、name=" theme"、name=""、或干脆没写name - 服务端接收也依赖这个值，PHP 用
$_POST['theme']，Node.js 用req.body.theme，前后端必须对齐
label 点击失效或误触发第一个选项
点击 <label></label> 没反应，或总选中第一个 radio，大概率是 for 和 id 不匹配。
-
<label for="opt-a">A</label>必须对应<input id="opt-a">，不能只靠name或位置关系 - 多个
<label for="same-id"></label>会全部绑定到第一个匹配的id，造成误选 - 避免用
display: none隐藏 radio，这会让 label 失效；改用position: absolute; opacity: 0; width: 1px; height: 1px;
React/Vue 中 checked 状态不更新？先看原生逻辑
框架里 radio 不切换，往往不是状态没更新，而是 HTML 分组本身没成立——框架无法绕过浏览器原生规则。
立即学习“前端免费学习笔记（深入）”；
- React 中每个
<input type="radio">必须有相同的name，否则checked属性再正确也没用 - Vue 中不要只靠
v-model，先确保name统一；否则即使绑定同一个变量，视觉上仍是“各自为政” - 别用
(click)="xxx"或onclick="xxx"替代原生行为，它不改变checked状态，也不触发表单验证逻辑
默认选中和禁用控制要分清场景
checked 只控制初始状态，disabled 控制可交互性，两者作用域不同，混用易出错。
-
checked是布尔属性，存在即生效，不要写checked="true"或checked="checked" - JS 动态设置用
element.checked = true，不是setAttribute('checked', '')（后者在旧 Safari 下可能不触发表单逻辑） -
disabled的 radio 不会提交 value，且点击无反馈；如需“视觉禁用但保留逻辑”，应结合 CSS + JS 控制
最容易被忽略的是：所有检查都应在浏览器开发者工具的 Elements 面板里直接看渲染后的 DOM，而不是只信源码或框架模板——因为服务端渲染、JS 插入、SSR hydration 都可能导致最终 name 或 id 值与预期不符。
