radio单选框靠name属性值完全相等（区分大小写和空格）实现互斥，同一组必须name一致且唯一，不同组name须不同；js获取需用:checked伪类并判空；表单提交时未选中的name字段不发送。
radio单选框靠name属性分组，不是id或class
单选框之间能互斥（选一个则另一个自动取消），唯一决定因素就是name属性值是否相同。浏览器根本不看id、class甚至value是否一样，只比对name字符串是否完全相等——包括大小写和空格。
常见错误是给每个<input type="radio">配了不同name，结果变成“多选”；或者混用大小写（比如name="gender"和name="Gender"），导致两组独立单选框。
-
name必须是合法的HTML标识符（建议只用字母、数字、下划线、短横线） - 同一组所有
<input type="radio">的name值必须逐字符一致 -
name值可以是任意字符串，但别用空格或中文（虽部分浏览器容忍，但表单提交时可能被截断或编码异常）
同一个页面多个单选组，name值必须互不相同
比如页面里既有「性别」又有「年龄段」两个单选区域，它们的name就不能都叫choice，否则点「男」会意外取消「18-25岁」——因为浏览器认为它们属于同一逻辑组。
实际命名建议带语义前缀：
- 性别组：
name="user_gender" - 年龄段组：
name="user_age_range" - 订阅偏好组：
name="newsletter_frequency"
这样既避免冲突，也方便后端接收时区分字段名。注意：前后端约定的name值必须严格一致，否则PHP的$_POST['xxx']或JS的FormData.get('xxx')取不到值。
JS获取当前选中的radio值，别遍历所有input[type=radio]
直接用document.querySelector('input[name="xxx"]:checked')最稳妥。如果用querySelectorAll('input[type=radio]')再循环判断checked，容易漏掉没选中的情况，还多一次遍历。
示例：
const selected = document.querySelector('input[name="user_gender"]:checked');
if (selected) {
console.log(selected.value); // 输出 'male' 或 'female'
} else {
console.log('未选择'); // 注意：这里要处理空值
}
关键点：
- 务必加
:checked伪类，否则返回第一个匹配元素（不管是否选中） - 查询结果可能是
null，使用前必须判空 - 不要依赖
selectedIndex或options——那是<select></select>的API，对radio无效
form提交时，只有checked的radio才发到服务端
这是常被忽略的细节：如果一组radio全都没选，整个name字段根本不会出现在POST或GET数据中。后端收到的可能是空值、缺失字段，甚至触发校验失败。
应对方式：
- 前端提交前用JS强制校验：
!document.querySelector('input[name="xxx"]:checked') - 后端不能假设该字段一定存在，需做
isset()或hasOwnProperty()检查 - 不想改逻辑？可加一个默认隐藏的
type="hidden"兜底（但要注意它会被同name的radio覆盖）
比如：<input type="hidden" name="user_gender" value=""> + 三个radio共用name="user_gender"，当用户没选时，提交的仍是user_gender=；但如果用户选了，hidden就会被radio的value覆盖——这是HTML表单的原生行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
