单选按钮互斥的关键在于同组 radio 必须 name 属性完全一致（含大小写和空格），value 决定提交值，label 绑定提升可访问性，checked 仅设一个且 js 操作需先清空同组其他项。
input 标签用 type="radio" 实现单选按钮，关键不在“怎么写”，而在“怎么让它们真正互斥”——同一组必须共享相同的 name 值，否则点击无效。
必须设相同的 name 属性才能分组
浏览器只认 name 相同的 input[type="radio"] 为一组，点一个，其他自动取消。没设 name、或 name 拼错、大小写不一致，都会导致各自独立可选。
常见错误现象：
– 点了 A 选项，B 还是选中状态
– 打印 form.elements.xxx 发现只拿到一个值，但实际页面显示多个被选中
实操建议：
– 所有同组 radio 的 name 必须完全一致（包括空格和大小写）
– 推荐用语义化名称，比如 name="gender" 而不是 name="r1"
– 不要依赖 id 或 class 来分组，它们对单选逻辑无影响
value 决定提交时发送什么，不是显示文字
单选按钮本身不显示文字，value 是表单提交时实际发送的字符串；显示内容得靠紧邻的 label 标签或直接写在后面——但后者可访问性差，不推荐。
使用场景：
– 后端通常只接收 value 字符串，比如 "male"、"female"、"other"
– 别把中文写进 value（如 value="男"），URL 编码易出问题，也难做逻辑判断
示例：
<input type="radio" name="role" value="admin"><label>管理员</label><br><input type="radio" name="role" value="user"><label>普通用户</label>
默认选中用 checked，但别同时设多个
加 checked 属性会让对应项初始为选中态。如果一组里多个都写了 checked，浏览器只认第一个，其余忽略——但这会误导维护者，也违反单选语义。
容易踩的坑：
– 动态渲染时重复插入 checked（比如 Vue/React 中未控制好条件）
– 服务端返回数据后 JS 手动设置 input.checked = true，但忘了先清空同组其他项
– 使用 defaultChecked（React）时误写成 checked，导致受控失效
实操建议：
– 初始状态只给一个加 checked
– JS 控制时，优先用 document.querySelector('input[name="xxx"][value="yyy"]').checked = true，而不是遍历所有再比对
真正麻烦的从来不是怎么画出圆圈，而是确保它在各种框架、表单库、无障碍读屏下仍保持单选语义——name 一致、value 干净、label 正确绑定，这三件事漏掉任何一环，都会让看似简单的 radio 变成调试黑洞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
