单选按钮实现单选功能的关键在于name属性必须完全一致，label必须正确绑定，checked需在html中声明，获取值时应限定name组别。
单选按钮能“单选”，只靠 name 属性；没设或设错 name，就不是单选，是多个独立勾选项——这是绝大多数问题的根源。
name 属性必须完全一致才能互斥
浏览器只认 name 值是否相同，不看位置、class、id 或样式。大小写、空格、下划线都算不同值。
-
name="user_status"和name="user_Status"是两组，可同时选中 - 漏写
name（即<input type="radio">）等于每个按钮自成一组 - 服务端接收时也只按
name取值，提交后拿到的是单个value字符串，不是数组 - 调试时直接在 Elements 面板里搜
name="xxx"，看是否所有目标input都命中
label 必须绑定，否则点文字无效
用户几乎从不直接点击小圆圈，而是点文字。没绑定 label，就是半残功能。
- 推荐写法：
<label><input type="radio" name="color" value="red"> 红色</label>（input包在label内） - 备选写法：用
for和唯一id关联，<label for="opt_blue">蓝色</label><input id="opt_blue" type="radio" name="color" value="blue"> - 禁止写法：
label和input完全分离、无任何关联；或多个radio共用同一个id - 移动端点击区域太小？别只加
font-size，确保label本身可点击且包裹有效内容
默认选中只能用 checked 属性，不能靠 JS 补
checked 是布尔属性，写上即生效，且必须由服务端或初始 HTML 控制。JS 动态设 .checked = true 很容易失效。
- 正确：
<input type="radio" name="theme" value="dark" checked>（页面加载即生效） - 错误：
document.querySelector('[value="dark"]').checked = true（可能因 DOM 未就绪、SSR 渲染顺序、框架响应式更新而丢失） - 同一组里只能有一个
checked；写多个，浏览器只认最后一个，但属于无效 HTML - 用了
required却没任何checked，表单提交会直接阻断并报错 - 回显编辑页？让后端根据当前数据，在对应
input上输出checked，而不是前端 JS “找值再打钩”
JS 获取当前选中值要精准定位 name 组
别用全局查 :checked，容易跨组误拿；也别遍历整页所有 radio，效率低还易漏判空。
- 推荐：
document.querySelector('input[name="user_gender"]:checked')?.value（返回null或字符串） - 错误：
document.querySelector('input[type="radio"]:checked')（可能拿到其他组的选中项） - 错误：
document.getElementsByName('user_gender')返回 HTMLCollection，得手动循环找checked === true，冗余 - 监听变化？只给任意一个同
name的radio绑change事件即可，不用每个都绑 - 注意：如果整个
fieldset被设了disabled，所有radio都不可交互，checked也会被忽略
真正卡住人的，从来不是怎么写标签，而是 name 拼错、label 没绑、checked 交给 JS 补、获取值时没限定组——这些地方一错，功能就静默失效，连控制台都不报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
