单选框互斥依赖 name 属性一致，id/class 无效；name 拼写、大小写、缺失均导致分组失败；需用 fieldset+legend 实现语义化分组；同一组仅一个 checked 有效；单复选框必须 name 隔离。
同一组单选框必须共用完全相同的 name 属性
浏览器只靠 name 值判断哪些 <input type="radio"> 属于同一组，其他属性（id、value、位置、样式）全都不影响互斥逻辑。只要 name 一致，点一个，同组其他自动取消。
常见错误包括：
-
name拼写不一致，比如gender和gander - 大小写混用，比如
Theme和theme是两组 - 漏写
name，导致每个单选框变成独立控件，可全选
正确写法示例：
<input type="radio" name="payment" value="alipay"><label>支付宝</label> <input type="radio" name="payment" value="wechat"><label>微信支付</label> <input type="radio" name="payment" value="bank"><label>银行卡</label>
为什么不能用 id 或 class 分组
id 必须唯一，不能复用；class 是样式/脚本标记，浏览器根本不读它来控制单选行为。强行用 JS 监听 class 并手动取消其他选项，既绕过原生机制、增加维护成本，又破坏表单可访问性（如屏幕阅读器无法识别逻辑分组）。
真正需要语义化分组时，应该用 <fieldset></fieldset> + <legend></legend> 包裹整组，而不是依赖 class。
checked 属性只能设一个，且仅在 HTML 加载时生效
同一 name 组里多个 checked，浏览器按解析顺序只保留最后一个——这不是“多选”，而是 HTML 写法错误，会导致意外交互（比如动态插入后默认状态错乱）。
如果初始选中状态不确定（例如从接口加载），别硬编码 checked，改用 JS 控制：
document.querySelector('input[name="payment"][value="wechat"]').checked = true;
注意：直接赋值 checked = true 不会触发 change 事件，需要手动 dispatchEvent 才能保证监听逻辑同步。
混排单选与复选框时，name 隔离是关键
单选和复选可以共存于同一表单，但必须用不同 name。比如订单类型用 name="order_type"（单选），附加服务用 name="addons"（复选）——两者互不干扰。
容易踩的坑：
- 把单选和复选误设为相同
name，结果复选框点击后“清空”了单选状态（实际是浏览器把它们当成了同一组，而复选框不支持checked互斥逻辑，行为未定义） - 用同一个
fieldset包裹但没加legend，屏幕阅读器会把所有控件读作一组，破坏语义
真正要联动（比如选中某单选后显示对应复选项），得靠 JS 显式控制，不能靠共享 name。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
