单选按钮组的 name 属性必须相同，每道题独立一组并唯一标识（如 q1、q2），value 应设为明确英文标识，推荐用 label 包裹 radio 实现点击文字选中。
单选按钮组的 name 属性必须相同
HTML 单选按钮（<input type="radio">）能形成互斥关系，靠的不是标签结构，而是 name 属性值一致。如果一组题目的选项 name 不同，用户就能同时选中多个——这显然不是单选题逻辑。
常见错误：复制粘贴时忘了改 name，导致每道题的四个选项 name 各不相同，结果全可勾选；或者所有题目共用一个 name（如全叫 "q"），导致整张试卷只能选一个答案。
- 每道题独立一组，
name值应唯一标识该题，例如name="q1"、name="q2" -
value必须设置，且应为可提交的明确标识（如"A"、"B"），不要用中文或空格 - 推荐给每个
input配套<label></label>，点击文字也能触发选择，提升可用性
label 与 input 的正确绑定方式
单纯把 <input> 和文字写在一起（比如 <input> A. 选项内容）无法实现点击文字选中——浏览器不会自动关联。必须显式绑定。
两种合法方式：
① <label></label> 包裹 <input>（最简、最不易出错）
② <label for="xxx"></label> + <input id="xxx">（需确保 for 和 id 完全一致）
立即学习“前端免费学习笔记（深入）”；
示例（推荐方式①）：
<label><input type="radio" name="q1" value="A"> A. 二叉树遍历必须用递归</label><br><label><input type="radio" name="q1" value="B"> B. 深度优先搜索基于栈</label>
默认选中与禁用状态的控制
试卷通常不允许预设答案，所以一般不加 checked；但如果用于“练习模式”或“样题展示”，可对某一项添加 checked 属性（注意：同一 name 组中只应有一个 checked）。
禁用某个选项（比如题目未开放作答、或该选项已被移除但需保留在 DOM 中）用 disabled，此时它既不能点击，也不会随表单提交——这点和 readonly 不同（readonly 对 radio 无效）。
-
checked是布尔属性，写上即生效，无需checked="true" -
disabled会让整个<input>灰显且不可交互，配套的<label></label>文字也会变灰（除非 CSS 覆盖） - 避免对整组 radio 同时加
disabled，否则用户一道题都答不了
获取用户选择结果的 JS 方式
提交前校验或动态反馈，常需用 JavaScript 读取当前选中的值。关键点：不能直接查 document.querySelectorAll('input[type="radio"]')，而要按题（name）分组处理。
示例（获取第 1 题答案）：
const q1Selected = document.querySelector('input[name="q1"]:checked');<br>if (q1Selected) {<br> console.log('第1题选了：', q1Selected.value); // 如 "B"<br>} else {<br> console.log('第1题未作答');<br>}
容易踩的坑：
– querySelector 返回 null 时直接取 .value 会报 Cannot read property 'value' of null
– 用 querySelectorAll 配合循环判断 checked 效率低，没必要
– 表单重置（<form></form> 的 reset()）会清除所有 checked 状态，但不会影响 JS 变量缓存值
