html单选框互斥仅依赖name属性字符串完全一致（大小写、空格、下划线均敏感），常见失效原因包括大小写不匹配、末尾空格、拼写错误及缺失name属性；验证需用开发者工具全局搜索，js获取应使用document.queryselector('input[name="xxx"]:checked')?.value。
HTML单选框互斥不靠JavaScript、不靠CSS，只靠浏览器对name属性的原生解析——只要name字符串完全一致（大小写、空格、下划线全算），它们就自动构成一组，点一个，其他同名的立刻取消。
为什么name相同却还是能多选？
这不是浏览器bug，而是name根本没真正“相同”。常见原因有：
-
name="gender"和name="Gender"是两组（大小写敏感） -
name="theme "（末尾有空格） ≠name="theme" - 模板渲染时拼错：比如一处是
name="user_role"，另一处漏了下划线写成name="userrole" - 某个
<input>压根没写name属性——它自成一组，和其他谁都不互斥
怎么验证name是否真的一致？
别靠肉眼扫代码，直接用浏览器开发者工具查：
- 打开 Elements 面板
- 按
Ctrl+F（Windows）或Cmd+F（macOS）搜name="xxx"（把xxx替换成你预期的值） - 看所有匹配项是否都命中了目标单选框；漏掉一个，就是分组断了
- 特别注意 Shadow DOM 内部的节点——
document.querySelectorAll('input[name="xxx"]')查不到，得进对应shadowRoot里查
JS获取选中值时容易踩的坑
别遍历所有input[type="radio"]再判断checked，既慢又容易漏判：
- 正确写法：
document.querySelector('input[name="theme"]:checked')?.value—— 简洁、安全、自带空值防护 - 如果返回
null，说明当前没选中任何项（不是undefined，也不是空字符串） - 服务端不会收到
theme这个字段，而不是收到theme=null或theme=""—— 后端必须检查request.form.get("theme")是否存在，不能只判空
name的互斥是全局文档级行为，哪怕单选框分布在不同<form></form>甚至跨Shadow DOM，只要name字符串一模一样，点击就互斥。但JS查询范围受作用域限制，这点最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
