单选按钮必须用相同name属性分组才能实现单选功能，name值区分大小写，缺漏或错误将导致多选；checked仅控制默认选中且仅最后一个生效；服务端仅接收当前选中value；样式和交互需注意label关联、:checked兼容性及移动端隐藏方案。
单选按钮必须用 name 分组才有效
浏览器只靠 name 属性识别哪些单选按钮属于同一组，同组内只能选一个。如果漏写或写错 name，看起来像单选，实际可以全选。
-
name值必须完全一致（包括大小写），比如name="gender"和name="Gender"是两组 - 不同组的单选按钮可以共存于同一表单，互不影响
- 服务端接收时，也只拿到该
name对应的单个value，不是数组
<input type="radio" name="level" value="junior"> 初级<br><input type="radio" name="level" value="senior"> 高级
checked 属性决定默认选中项
页面加载时，只有第一个带 checked 的单选按钮会被选中；多个都加 checked，浏览器只认最后一个（但这是无效 HTML，别这么干）。
- 不能用 JavaScript 动态设置
checked=true来“模拟点击”，得用click()或直接赋值checked = true - 服务端不关心谁默认选中，
checked纯属前端行为，提交时只传当前选中的value - 如果所有单选都没设
checked，提交时该字段可能完全不发给后端（取决于浏览器和 form enctype）
<input type="radio" name="theme" value="dark" checked> 暗色<br><input type="radio" name="theme" value="light"> 亮色
用 :checked 伪类做样式时注意兼容性
纯 CSS 控制单选按钮外观（比如隐藏原生框、自定义圆点）依赖 :checked + 相邻兄弟选择器，IE8 及更早版本不支持。
- 必须把
<input>放在<label>内部，或用for关联，否则点击文字无法触发选中 -
label元素本身不能加:checked，它没这个状态，只能作用于input[type="radio"] - 移动端 Safari 对
opacity:0隐藏原生控件后点击响应有时延迟，建议用position: absolute; clip: rect(0,0,0,0)
表单提交时没收到单选值？先查这三处
后端收不到值，90% 是前端配置问题，不是后端 bug。
立即学习“前端免费学习笔记（深入）”；
-
name拼写错误，或被 JS 动态改过但没同步到 DOM - 单选按钮被包裹在
<fieldset disabled>里，整组失效（连checked都不生效） - 用了
form="xxx"外挂表单，但目标<form id="xxx">不存在或未加载完成
调试时打开浏览器开发者工具 Elements 面板，手动勾选再看对应 input 是否真有 checked="" 属性出现——没出现说明根本没被识别为可交互控件。
