checked 属性必须作为 HTML 属性在初始 DOM 中存在，而非 JS 动态赋值，否则破坏屏幕阅读器识别、aria-checked 同步及 :checked 伪类映射；name 必须完全一致以保障单选互斥；id/for 显式关联 label 提升可访问性；value 必须非空且语义明确。
为什么 checked 属性不能靠 JS 动态赋值来控制选中状态
很多开发者习惯用 document.getElementById('radio1').checked = true 来“设为选中”，这在视觉上确实生效，但会绕过浏览器对表单控件的原生可访问性管理。屏幕阅读器（如 NVDA、VoiceOver）依赖 DOM 中 checked 属性的**初始存在与否**来判断默认选中项；后续 JS 修改 checked 属性值（布尔）不会触发 aria-checked 同步更新，也不影响 :checked 伪类在无障碍树中的映射。
真正可靠的做法是：让 checked 作为 HTML 属性（attribute）出现在初始 DOM 中 —— 即写成 <input type="radio" name="theme" value="dark" checked>，而不是靠 JS 补上。
- 服务端渲染或静态 HTML 必须显式写出
checked属性，不能留空 - React/Vue 等框架中，要用
defaultChecked（React）或v-model+ 初始值（Vue）而非checked={true}，否则会变成受控组件并切断无障碍链路 - 动态切换时，应通过改变
name组内其他input的checked属性（用setAttribute('checked', '')或移除）来模拟，而不是只操作一个
name 属性缺失会导致单选组完全失效
单选按钮的“互斥”行为不是靠 JS 实现的，而是浏览器原生根据 name 相同的一组 input[type="radio"] 自动管理。一旦某个按钮漏写 name，或大小写不一致（如 theme vs Theme），它就脱离了该组，变成独立可选的“幽灵按钮”——用户能点它，但它不取消同组其他项，屏幕阅读器也会把它读作普通复选框（因为缺少分组上下文）。
- 所有同组单选按钮必须共用**完全相同拼写的
name值**，建议全小写、无空格、用短横线分隔（如user-preference） - 避免用变量拼接
name，尤其在循环渲染时容易因作用域出错（例如 Vue 的v-for中未绑定正确 scope） - 可以用
document.querySelectorAll('input[type="radio"][name="theme"]')快速验证是否全部命中
没有 id + for 关联的 <label> 会让点击区域和语义双双丢失
仅靠包裹式 <label><input>...</label> 虽然能点击触发，但对屏幕阅读器不够友好：它可能无法准确将标签文本与具体某个单选按钮关联，尤其当一组按钮渲染在不同容器里时。显式用 id 和 for 绑定才是最稳妥的。
错误写法：<label><input type="radio" name="size" value="m"> Medium</label>
正确写法：<input type="radio" id="size-m" name="size" value="m"><label for="size-m">Medium</label>
-
id值必须唯一，且只能包含字母、数字、短横线、下划线，不能以数字开头 -
for的值必须与对应input的id完全一致（区分大小写） - 不要为了“省事”给多个
input设同一个id，这会破坏整个页面的无障碍结构
忽略 value 或设为空字符串会让提交数据不可用
表单提交时，单选按钮只发送被选中项的 value 值。如果忘了写 value，或者写成 value=""，后端收到的就是空值或 undefined —— 这不是 UI 问题，是数据完整性漏洞。更隐蔽的是：某些前端库（如 Formik）在初始化时若发现 value 缺失，会静默 fallback 到 "on"，导致前后端约定错乱。
- 每个
input[type="radio"]都必须有明确、非空、语义清晰的value（如value="dark"，而非value="1"） - 避免用中文或含空格的字符串作
value，URL 编码和后端解析都易出错 - 如果选项逻辑上需要“无选择”，应额外提供一个
<input value="">并配相应文案（如“暂不选择”），而不是靠 JS 清空
checked、name、id、value 这四个基础属性各司其职、严丝合缝。漏掉任意一个，屏幕阅读器听到的就可能是错乱的指令，键盘用户 tab 到的可能就是个死按钮。 
