单选按钮必须用相同name属性分组才能实现互斥选择；需用label包裹或for/id关联提升点击区域；默认选中用checked布尔属性；定制样式应隐藏原生控件并用伪元素模拟，确保状态反馈完整。
单选按钮必须用 name 统一分组
没有 name 属性，浏览器就认为它们彼此无关，无法实现“选一个、其他自动取消”的行为。哪怕样式看起来像一组，实际点击时仍可多选或完全不响应。
常见错误是只写 id 或 class，却漏掉 name；或者给每个 input 写了不同 name（比如 name="option1"、name="option2"），这等于建了多个独立单选组。
-
name值必须完全一致（大小写敏感），例如全部用name="theme" - 推荐搭配
value使用，提交表单时后端靠它识别选中项，如value="dark"、value="light" - 不要用
id替代name——id只用于 DOM 定位或label关联
用 label 包裹或关联提升可用性
直接点击文字不能触发单选框，用户得精准点到小圆圈上，体验差且移动端难操作。正确做法是让文字也成为点击热区。
两种写法都有效，但包裹式更简洁不易出错：
<label> <input type="radio" name="size" value="m"> 中号 </label>
或显式关联（需确保 for 和 id 严格匹配）：
<input type="radio" name="size" value="l" id="size-large"><label for="size-large">大号</label>
- 避免只写
<label>文字</label>而不包input或不设for，这会让 label 失效 - 如果用了
for，对应input必须有id，且值不能有空格或特殊字符
默认选中用 checked，但别重复设置
页面加载时想预设一个选项，加 checked 属性即可。注意：HTML 中它是布尔属性，写成 checked 或 checked="" 都行，但不要写 checked="false" —— 浏览器会把它当真值处理，照样选中。
- 同一组内只能有一个
checked，多写也只以第一个为准，但属于冗余和潜在维护风险 - JavaScript 动态设置请用
element.checked = true，别用setAttribute('checked', 'true')，后者在某些旧浏览器可能不触发状态更新 - 如果服务端渲染时动态插入
checked，确保逻辑只给一个元素加，避免模板引擎误插多个
样式受限但可安全定制外观
原生 input[type="radio"] 的外观无法用 CSS 直接改圆圈形状或颜色（appearance: none 是主流解法，但需手动补交互反馈）。
最稳妥的定制路径是：隐藏原生控件 + 用 label 伪元素模拟视觉效果 + 用 :checked 状态切换样式：
input[type="radio"] { display: none; }
input[type="radio"] + label::before {
content: "○";
}
input[type="radio"]:checked + label::before {
content: "●";
}
- 别试图用
background-color直接染原生圆圈 —— 它在多数浏览器里不生效 - 若用
appearance: none，记得补focus样式，否则键盘导航时失去焦点提示 - 移动端要注意点击区域至少 44×44px，光靠伪元素不够时，需扩大
label内边距或用min-height
真正麻烦的不是怎么画个新圆圈，而是确保所有状态（未选/已选/聚焦/禁用/键盘操作）都有对应反馈，且语义不丢失。简单场景优先用原生控件+合理 label，复杂定制再动伪元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
