单选按钮必须用相同name属性分组，value应为简洁标识符，label负责显示文案，checked用于默认选中，且需保障无障碍支持。

radio 单选按钮必须用 name 属性分组

单选按钮不是靠 type="radio" 自动互斥的，而是靠 name 属性值相同才构成一组。如果漏写 name，或者每项 name 值不一致，它们就各自独立，能同时被选中——这不是 bug，是规范行为。

实操建议：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 同一组单选按钮必须共用完全相同的 name 值，比如 name="gender"
• 避免用动态生成的随机 name（如带时间戳或索引），否则逻辑会断裂
• 服务端接收时，只拿到该 name 对应的唯一一个 value，所以后端字段也得按单值设计

value 属性决定提交内容，不是 label 文本

用户看到的是 label 里的文字，但表单提交、JS 读取 input 的 value 时，实际传的是 value 属性值。很多人误把中文文本直接塞进 value，导致 URL 编码混乱或后端解析失败。

实操建议：

• value 应使用简洁、无空格、无特殊字符的标识符，如 value="male"、value="female"
• 显示文案统一交给 label 或旁边文字，例如：<input type="radio" name="role" value="admin"><label>管理员</label>
• JS 获取选中项：用 document.querySelector('input[name="role"]:checked')?.value，注意空值判断

默认选中用 checked，别用 defaultChecked

defaultChecked 是 React 等框架里的受控属性，在纯 HTML 中无效；HTML 原生只认 checked 这个布尔属性。写成 checked="false" 或 checked="" 都会被浏览器当作 true 处理。

实操建议：

• 设默认项，直接写 checked（无值），如：<input type="radio" name="theme" value="light" checked>
• 若需 JS 动态设置，默认先清空所有同 name 的 checked，再设目标项：document.querySelector('input[value="dark"]').checked = true
• 不要依赖初始 DOM 状态做业务判断，始终以当前 :checked 查询为准

无障碍与可访问性不能只靠 appearance

单纯用 CSS 隐藏原生 radio（如 appearance: none）却不提供替代焦点、键盘操作和屏幕阅读器支持，会导致键盘用户无法 tab 切换、盲人用户读不到选项状态。

实操建议：

• 必须搭配 label 标签，并用 for 和 id 关联，或把 input 包在 label 内
• 自定义样式时，保留 :focus-visible 样式，且确保选中态（:checked + span::before）有足够对比度
• 避免用 div 模拟 radio，除非完整实现 ARIA role="radio"、aria-checked、aria-labelledby 等

radio 最容易出问题的地方不在写法本身，而在于 name 分组遗漏、value 设计和可访问性补全——这三处一错，轻则交互异常，重则影响合规和真实用户使用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！