单选按钮互斥的关键是name属性值完全相同；未选中的radio不会出现在表单数据中；js应使用queryselector('input[name="xxx"]:checked')获取选中值。
单选按钮 name 属性必须一致才能互斥
HTML 中 <input type="radio"> 要构成一组单选，关键不是靠 class 或位置，而是所有选项的 name 属性值完全相同。浏览器只认这个：同名 radio 之间自动互斥，提交时仅发送被选中的那个 value。
常见错误是复制粘贴时漏改 name，导致看似单选，实则各自独立；或者用不同大小写（如 gender 和 Gender），在某些旧浏览器中也会失效。
- ✅ 正确：
<input type="radio" name="level" value="beginner">、<input type="radio" name="level" value="advanced"> - ❌ 错误：
<input type="radio" name="level1" value="beginner">和<input type="radio" name="level2" value="advanced">
表单提交时，未选中的 radio 不会出现在 FormData 中
原生表单提交（method="POST" + action）或用 FormData 收集数据时，**未选中的 <input type="radio"> 完全不会被包含** —— 这不是 bug，是规范行为。后端收到的字段要么有值（如 level=advanced），要么根本不存在该字段。
这意味着：不能靠“接收不到值就默认为某选项”，而应在后端明确判断字段是否存在；前端若需默认选中，必须加 checked 属性，且只能有一个。
- 设置默认项：
<input type="radio" name="theme" value="dark" checked> - JS 动态检查是否选中：
document.querySelector('input[name="theme"]:checked')，返回null表示没选 - 用
FormData获取时：new FormData(form).get('theme')，未选则返回空字符串（不是null）
JavaScript 获取值时别直接 querySelectorAll
想用 JS 拿当前选中的 radio 值，最简方式不是遍历所有 radio，而是用带伪类的选择器一次性定位：document.querySelector('input[name="mode"]:checked')。它天然返回唯一匹配项或 null，比 querySelectorAll + 循环更安全、更高效。
注意：如果页面有多个同名 radio 组（比如两个独立表单都用 name="size"），这个选择器会跨表单匹配——所以确保 name 在当前上下文唯一，或限定父容器范围：
- 全局取值：
document.querySelector('input[name="size"]:checked')?.value - 限定表单内：
form.querySelector('input[name="size"]:checked')?.value - 避免报错：一定要用可选链
?.value，否则未选中时访问null.value会抛TypeError
后端接收不到值？先确认表单 method 和 enctype
如果提交后服务端收不到 radio 字段，大概率不是 JS 问题，而是表单配置错误。尤其注意两点：
-
<form method="GET"></form>会把值拼在 URL 后，可用浏览器地址栏直接验证是否出现?level=advanced -
enctype="multipart/form-data"仅在上传文件时需要，但一旦设了它，**普通字段（包括 radio）仍能正常提交**，无需额外处理 —— 有人误以为要手动 append，其实不用 - 若用
fetch提交，别忘了body: new FormData(form)，且服务端解析逻辑要匹配（如 Express 需urlencoded()或multer）
真正容易被忽略的是：radio 的 value 值里含空格或特殊字符（如 value="full time"），虽合法，但某些后端框架默认 trim 或转义，建议统一用短横线或下划线命名（full-time），减少歧义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
