单选按钮互斥仅由name属性字符串级相等决定，大小写、空格、下划线差异均导致分组失效；必须配label提升可用性；隐藏原生input时禁用display:none，应使用position:absolute+opacity:0+pointer-events:none。
单选按钮互斥不靠 CSS 或 JS 控制，只靠 name 属性一致 —— 这是浏览器原生行为，改样式、加 class、换标签结构都不影响它，只要 name 对不上，就不是一组。
name 属性必须完全一致才能互斥
浏览器只看 name 值是否字符串级相等：大小写、空格、下划线、拼写差一个字符，都算不同组。比如 theme 和 Theme 是两组；user_type 和 usertype 也是独立的。
- ✅ 正确写法：
<input type="radio" name="mode" value="dev">和<input type="radio" name="mode" value="prod"> - ❌ 常见错误：模板渲染时变量拼错，如
name="{{ group_name }}"在某处漏了下划线或大小写不统一 - ⚠️ 注意：服务端接收时也只认这个
name，后端取值用request.form.get("mode")（Flask）或$_POST["mode"]（PHP），不会拿到多个值
label 关联不是可选，而是必要操作
没 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>，此时id必须唯一且和for完全匹配 - ❌ 不要用
title或placeholder替代label—— 它们不触发选中，也不被屏幕阅读器当作控制文本读出
自定义样式时别用 display:none 隐藏原生 input
很多自定义单选按钮的做法是把原生 <input type="radio"> 用 display: none 隐藏，再用伪元素或额外 <span> 模拟外观。这本身没问题，但隐藏方式错了会直接破坏互斥逻辑。
立即学习“前端免费学习笔记（深入）”；
- ✅ 安全隐藏：
position: absolute; opacity: 0; pointer-events: none;—— input 仍在 DOM 中、可聚焦、能响应事件 - ❌ 危险隐藏：
display: none或visibility: hidden—— 浏览器可能跳过该元素参与 name 分组，尤其在某些旧版 Safari 或动态插入场景下 - ? 验证方法：用 JS 查
document.querySelectorAll('input[name="mode"]')，确保返回节点数等于你写的单选按钮个数
真正容易被忽略的不是怎么写样式，而是 name 拼写一致性 —— 它不报错、不警告，只默默让你的表单多选、后端收不到值、测试时才发现“明明点了 A，B 也还是选中状态”。
