radio 必须用相同 name 属性分组才能互斥，name 不同或未设置则变为独立开关；推荐用 fieldset+legend 保证语义化与无障碍，JavaScript 获取选中值应使用 querySelector('input[name="xxx"]:checked') 并判空。
radio 必须用 name 属性分组才能互斥
单独放几个 <input type="radio"> 不会自动变成单选，浏览器只认 name 相同的才算一组。没设 name，或者每个 name 都不同，就变成多个独立开关，能同时选中多个。
实操建议：
-
name值要一致，比如所有选项都用name="question1" - 每个
value必须不同，提交时后端靠它区分选了哪项 - 推荐加
id+<label>绑定，点击文字也能触发选中
<input type="radio" name="question1" value="A" id="q1a"><label for="q1a">选项 A</label>
checked 属性控制默认选中项
页面加载时想预设一个选项被选中，加 checked 即可。注意：同一组里只能有一个 checked，多写也只生效第一个；且 checked 是布尔属性，写上就表示 true，不用赋值。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 写了多个
checked，但实际只有第一个生效 - 用 JavaScript 动态设置时误写成
input.checked = "true"（应为true布尔值） - 服务端渲染时忘记根据当前数据决定哪个
checked，导致用户刷新后状态丢失
获取 radio 选中值的 JavaScript 写法
不能直接对单个 <input type="radio"> 元素调用 .value，因为未选中时它的 checked 是 false，value 没有意义。必须先找到当前组里被选中的那个。
推荐做法：
- 用
document.querySelector('input[name="question1"]:checked')获取选中元素，再取.value - 如果没选中，结果是
null，记得判空，否则读.value会报Cannot read property 'value' of null - 不要用
document.getElementsByName()配合循环判断checked，效率低且易漏判
const selected = document.querySelector('input[name="question1"]:checked');<br>const answer = selected ? selected.value : null;
无障碍与语义化容易被忽略的点
仅靠 <input> + <label> 还不够。屏幕阅读器需要知道这是一道题，而不仅仅是几个独立控件。
实操建议：
- 用
<fieldset>包裹整组 radio，并配<legend>作题干，这是最标准的语义结构 - 避免用
div或span替代label，否则键盘 Tab 无法聚焦到对应选项 - 别依赖颜色或位置暗示“单选”，色弱用户可能无法分辨，必须靠
name和交互逻辑保证行为正确
复杂点在于：多人协作时，前端常把题干和选项拆成不同组件，容易丢掉 fieldset 结构；后端返回的题目数据若没带唯一 name 字段，前端得自己生成，还得确保不重复。
