纯html单选题需确保同题所有radio共用相同name、每个有明确value；label必须正确绑定input；隐藏原生控件应使用position: absolute + opacity: 0而非display: none以保可访问性。
怎么用纯 HTML 实现单选题结构
纯 HTML 本身就能做选择题，关键不是“能不能”，而是别漏掉 name 和 value 这两个属性。没有 name，表单提交时选项根本不会被带上；没有 value，后端或 JS 拿不到你选的是哪个——它默认是 on，毫无区分度。
常见错误现象：console.log(document.querySelector('input[name="q1"]:checked') 返回 null，八成是漏了 name，或者多个单选框 name 不一致。
- 所有同题选项必须共用同一个
name值（比如name="q1"） - 每个
input[type="radio"]必须有明确的value（比如value="A"、value="B"） - 用
label包裹input或用for属性关联，否则点击文字无法选中 - 别加
required后就以为前端校验万无一失——它只防空提交，不防用户绕过
怎么让选项看起来像“选择题”而不是一堆按钮
浏览器默认样式丑且不统一，但改样式前得先确保语义和功能没坏。CSS 可以隐藏原生 input，用 ::before 或背景图模拟圆点，但前提是：不能把 input 设为 display: none，否则键盘 Tab 和屏幕阅读器会跳过它。
推荐做法是用 position: absolute; opacity: 0; pointer-events: none; 隐藏原生控件，再用 label 的伪元素画 UI。这样既保留可访问性，又可控样式。
立即学习“前端免费学习笔记（深入）”；
采用zblog修改的模板，简单方便，直接解压上传到空间即可使用，页面简单，适合SEO，导航，次导航，最新文章列表，随机文章列表全部都有，网站采用扁平结构，非常适用淘宝客类小站，所有文章都在根目录下。所有需要修改的地方在网页上各个地方都有标注说明，一切在网站后台都可以修改，无须修改任何程序代码，是新手的不二选择。后台登陆地址： 域名/login.asp用户名：admin (建议不要修改)密码：adm
- 绝对定位 + 透明度隐藏比
display: none安全 -
label必须和input正确绑定（for="id"或嵌套），否则自定义样式点不生效 - 移动端要注意
touch-action和点击热区大小，至少留 44×44px
提交时怎么拿到用户选的答案
最轻量的做法是直接走 HTML 表单提交（method="GET" 或 POST），后端收 q1=A 这样的键值对。如果要用 JS 处理，核心就是查 :checked 状态，但得注意时机——别在页面还没加载完就执行查询。
常见错误现象：document.querySelector('input[name="q1"]:checked').value 报错，因为可能没选，或 DOM 还没 ready。
- 用
document.addEventListener('DOMContentLoaded', ...)包住 JS 逻辑 - 查
:checked前先判断是否存在，比如const el = document.querySelector('input[name="q1"]:checked); if (el) { ... } - 别用
getElementsByName配合循环——它返回的是HTMLCollection，不支持.find()，容易写崩
要不要加 JS 校验或交互动效
可以加，但别让它成为必经路径。比如“下一题”按钮禁用状态，应该靠 JS 监听 change 事件来控制，而不是等用户点完才检查——否则用户可能一直卡在第一题。
性能影响很小，但兼容性要注意：change 事件在 radio 上 IE9+ 支持良好，但旧 Android WebView 有延迟触发问题，所以别依赖它做关键流程锁死。
- 监听
change比click更准确（避免重复触发） - 禁用按钮时，记得同时给
aria-disabled="true"，不然屏幕阅读器不知道 - 如果题目多、选项多，别一次性渲染全部 DOM，考虑懒加载或分步显示
