单选题需用相同name属性实现互斥选择，name值必须完全一致；推荐label包裹radio提升体验；默认选中用checked但同组仅限一个；获取值用querySelector('input[name="q1"]:checked')?.value。
用
实现单选题，必须加
属性
单选题能“互斥选择”的核心不是靠 JS，而是浏览器原生行为：同一组
必须共享相同的
值。没设
，或
值不一致，就变成多个独立的“单选框”，点一个不会取消另一个。
常见错误现象：
– 点击选项 A，再点选项 B，A 还是选中状态
– 控制台没报错，但逻辑完全失效
实操建议：
– 所有同题选项的
必须完全相同（区分大小写、空格、引号）
– 推荐用语义化名称，比如
或
– 不要用动态拼接出不同
（如
），除非你本意就是分组
用
包裹提升点击体验和可访问性
只放
，用户只能精准点击小圆圈；加上
后，整个文字区域都可点击，且屏幕阅读器能正确关联题目与选项。
立即学习
“
前端免费学习笔记（深入）
”；
实操建议：
– 推荐用包裹式写法：
– 避免用
/
绑定方式，除非 DOM 结构强制分离（易漏写
或拼错）
– 不要遗漏
—— 提交表单或 JS 获取时全靠它，空字符串或未定义会导致取值困难
默认选中用
，但别在多题中重复设
是布尔属性，存在即生效。如果一组里多个 radio 都写了
，浏览器只认第一个（HTML 规范行为），后续的会被忽略——但这会误导人，也增加维护成本。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
使用场景：
– 初始状态需预设答案（如“性别”默认选“保密”）
– 表单重载时回填上次选择（此时应由 JS 控制，而非静态 HTML）
实操建议：
– 同一组内最多一个
– 动态场景（如编辑表单）优先用 JS 设置：
– 不要依赖
来“修复”没设
的问题——那根本不是单选题
获取选中值别直接遍历所有
，用
更稳
新手常写循环判断每个
，但容易漏掉作用域（比如多个题目混在一起）、或被 disabled 项干扰。其实浏览器提供了更精确的定位方式。
实操建议：
– 获取某题答案：
– 返回
表示没选，避免非空判断出错
– 如果用表单提交，后端收到的就是
对应的
字符串，无需额外解析
– 注意：CSS 选择器中的
仅匹配当前已勾选的，不触发重排，性能无压力
真正容易被忽略的是语义一致性：同一份 HTML 里，
、
、
文本三者得对齐业务含义。比如后台期望接收
，前端却写了
，后面排查时连日志都对不上。
namenamenamenamenamename="q1"name="user_gender"namename="q${i}"forididvaluecheckedcheckedcheckedcheckeddocument.querySelector('input[value="b"]').checked = truecheckednameinputquerySelectorinput.checkeddocument.querySelector('input[name="q1"]:checked')?.valuenullnamevalue:checkednamevaluelabelstatus=activevalue="启用"