单选按钮互斥依赖相同name属性，value决定提交值，需用label关联文本，checked最多设一个，隐藏时应避免display:none以保障无障碍支持。
单选按钮必须用相同 name 才能互斥
浏览器只靠 name 属性判断哪些 input 属于同一组单选按钮。哪怕 id、value、位置或样式完全不同，只要 name 值一致，它们就自动绑定为一组，选中一个时其他自动取消。
常见错误是漏写 name，或拼写不一致（比如 gender 和 gander），结果变成多个独立单选按钮，无法互斥。
<input type="radio" name="theme" value="dark"><input type="radio" name="theme" value="light"><input type="radio" name="theme" value="auto">
value 决定提交时发送什么值，不是显示文本
单选按钮本身不显示文字，value 是表单提交时实际传给后端的字符串。用户看到的标签需要额外用 <label></label> 包裹或通过 for 关联——否则点击文字无法选中按钮。
不推荐用 placeholder 或 title 替代 <label></label>，它们对可访问性和点击区域都没帮助。
- ✅ 正确：
<label><input type="radio" name="size" value="m"> Medium</label> - ✅ 也可：
<input id="s1" type="radio" name="size" value="s"><label for="s1">Small</label> - ❌ 错误：
<input type="radio" name="size" value="l"> Large（点击“Large”无效）
默认选中用 checked，但别多个同时设
同一组中最多只能有一个 checked，否则浏览器会按 HTML 解析顺序保留最后一个生效——这容易引发意外交互，尤其动态渲染时。
如果初始状态不确定（比如从接口加载），建议 JS 控制，而不是在 HTML 里硬编码多个 checked。
- ✅ 安全写法：
<input type="radio" name="lang" value="zh" checked> - ❌ 危险写法：
<input type="radio" name="lang" value="zh" checked><input type="radio" name="lang" value="en" checked>（后者会覆盖前者） - ⚠️ 注意：没有
checked时，整组值为空字符串，后端需处理未提交情况
移动端和无障碍支持不能只靠视觉
单纯用 CSS 隐藏原生 input（如 display: none 或 opacity: 0）会导致屏幕阅读器无法识别，且 iOS Safari 可能拒绝触发 change 事件。
真正可用的隐藏方式是 position: absolute; left: -9999px，再用 <label></label> 样式模拟外观。同时确保 aria-checked 与真实状态同步（若手动接管逻辑）。
另外，iOS 上小尺寸单选按钮点击热区过小，务必用 <label></label> 扩展可点区域，别依赖默认 12–16px 的原生尺寸。
