单选按钮必须用相同name属性分组才能互斥，否则形同独立复选框；必须配label提升可访问性；每组应至少一个checked确保初始状态；表格中需避免dom结构污染，推荐fieldset包裹或css布局。
单选按钮必须用 name 属性分组才能生效
不加 name 的 <input type="radio"> 本质上是“独立的复选框”，点击一个不会取消另一个——这是新手最常踩的坑。浏览器只靠 name 值判断是否属于同一组，同名才互斥。
常见错误现象：男 和 女 都能同时被选中；表单提交后后端收不到 gender 字段（因为没分组，浏览器不认为它是有效表单控件）。
-
name值必须完全一致（区分大小写），比如name="gender"和name="Gender"是两组 - 不同逻辑组必须用不同
name，例如payment和delivery不能混用同一个值 - 避免全局重复：多个表单共存时，别让不同区域的单选按钮意外共享
name
label 标签不是可选的，而是必须配对的
只写 <input type="radio" name="x">选项文字，用户只能点很小的圆圈区域，移动端几乎点不中。不加 label 会直接损害可访问性（屏幕阅读器无法关联文字和控件）。
正确做法只有两种：
- 用
for属性绑定：<input id="opt1" name="x" value="a"><label for="opt1">选项A</label> - 用
label包裹：<label><input name="x" value="a">选项A</label>
注意：id 必须唯一，且和 for 值严格匹配；包裹写法里 input 不能有 id 冗余属性。
默认选中用 checked，但别漏掉语义完整性
checked 是布尔属性，存在即生效，不用写 checked="true" 或 checked="checked"。但它不只是“视觉默认”，更是表单初始状态的明确声明。
容易忽略的点：
- 每组单选按钮应至少有一个带
checked，否则提交时该字段可能为空（尤其后端校验必填时出错） - 不要在 JS 中动态添加
checked后就不管了——DOM 更新后，如果用户没操作，表单仍以初始checked为准 - 服务端接收时，未选中的项根本不会出现在 POST 数据里，所以后端必须处理“字段缺失 = 未选择”这个逻辑
表格里放单选按钮要小心结构污染
把 input 直接塞进 <td> 没问题，但常见错误是：为了对齐把多个 <code>radio 拆到不同行、不同列，结果 name 虽相同，却因 DOM 结构松散导致 CSS 样式错乱或 JS 事件委托失效。
稳妥做法：
- 保持一组
radio在同一个<tr> 或相邻 <code><td> 内，避免跨行跨列分散<li>用 <code><fieldset></fieldset>+<legend></legend>包裹整组（即使在表格内），增强语义和 CSS 作用域 - 若需横向排列，优先用 CSS
display: flex控制td内部布局，而不是强行拆分 HTML 结构
真正麻烦的是混合了 colspan/rowspan 的复杂表格——这时候建议把单选逻辑抽离到表格外，用 data-* 属性关联行数据，反而更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
