单选框互斥靠相同name属性实现，大小写敏感；每行独立选择需用带ID的唯一name；value用语义化字符串；label提升可用性；checked设默认值；JS按name精准获取选中值。
用 <input type="radio"> 创建单选框，核心是靠 相同的 name 属性 实现互斥选择，不是靠 JS 控制或样式模拟。
同一组单选框必须共用 name
只有 name 完全一致（大小写敏感），浏览器才识别为一组，点击一个时自动取消同组其他项。比如性别选项：
<input type="radio" name="gender" value="male"> 男<input type="radio" name="gender" value="female"> 女<input type="radio" name="gender" value="other"> 其他
若把其中一个写成 name="Gender" 或 name="user_gender"，它就脱离分组，变成独立开关——这是最常见错误。
每行独立选择时，name 要带唯一标识
表格中每行代表一条数据（如审批列表），需让每行各自二选一（如“通过/驳回”），就不能全用同一个 name。应为每行生成带 ID 的 name：
立即学习“前端免费学习笔记（深入）”；
- 第 1 行：
<input type="radio" name="decision_101" value="approve">和<input type="radio" name="decision_101" value="reject"> - 第 2 行：
<input type="radio" name="decision_102" value="approve">和<input type="radio" name="decision_102" value="reject">
value 用语义化字符串（如 approve、reject），方便后端或 JS 直接判断，避免用 "1"/"0" 等无意义数字。
用 label 提升可用性，用 checked 设默认值
别直接点 input，要用 <label> 包裹或关联，扩大点击区域并支持屏幕阅读器：
<label><input type="radio" name="role" value="admin"> 管理员</label>- 或分开写：
<input id="role-admin" type="radio" name="role" value="admin"><label for="role-admin">管理员</label>
默认选中项必须在 HTML 中用 checked 属性声明（布尔属性，写上即生效），不要等 JS 加载后再设：
- ✅ 正确：
<input type="radio" name="status" value="active" checked> 启用 - ❌ 避免：
<input type="radio" name="status" value="active">+ JS 手动设checked = true
获取选中值要按 name 查找
JS 获取用户选择时，不要遍历所有 radio，而应按 name 精准定位：
document.querySelector('input[name="gender"]:checked')?.value- 提交表单时，浏览器会自动把当前选中的那个
name=value发送到服务端
如果某组没任何项被选中，该 name 不会出现在提交数据中——注意后端做空值处理。
