HTML单选按钮必须用相同name属性值分组才能实现互斥选择；name值需完全一致，配合唯一value、checked默认选中、label语义关联及正确JS获取方式，方能保障功能、可访问性与表单数据准确性。
HTML单选按钮必须用 name 分组才能互斥
单选按钮（<input type="radio">）本身不会自动“单选”，全靠相同 name 属性值触发浏览器原生互斥逻辑。没设 name，或各按钮 name 不一致，就变成多个独立的“伪单选”——能同时勾选，完全失去单选语义。
常见错误现象：
– 页面上看着是单选样式，但点两个都能保持选中状态
– 表单提交后只拿到最后一个被点的值（因为没分组，浏览器按 name 归并时只保留一个）
– JS 用 document.querySelectorAll('input[type="radio"]') 拿到所有，却无法通过 checked 状态判断当前选中项（因为逻辑上本就不该跨组判断）
-
name值必须完全一致（包括大小写、空格），推荐用小写字母+下划线，比如user_gender - 同一组内每个
input必须有唯一value，表单提交和 JS 获取都依赖它，别留空或重复 - 可加
required属性强制用户选择，但注意：若页面加载时没有任何一项带checked，且用了required，提交会直接报错
用 checked 属性设置默认选中项
默认选中不能靠 JS 或 CSS 实现，必须在 HTML 中用 checked 属性声明。这是唯一可靠方式，否则可能因 JS 执行时机、框架重渲染等导致状态丢失或闪烁。
使用场景：
– 表单编辑页回显历史数据（此时应由服务端输出对应 checked）
– 新建表单中预设合理默认值（如性别选“保密”，状态选“启用”）
立即学习“前端免费学习笔记（深入）”；
-
checked是布尔属性，写上即生效，无需赋值，正确写法是checked，不是checked="true"或checked="checked" - 同一
name组里只能有一个checked，多写也只认第一个（但属于无效 HTML，建议避免） - 如果用 JS 动态设置，默认选中逻辑要同步更新
checked属性，而不仅是改.checked属性（否则 SSR 或爬虫看不到状态）
JS 获取单选组当前值要用 querySelector 配合 name
直接遍历所有 radio 元素效率低、易出错；正确做法是按 name 定位整组，再找其中被选中的那个。
常见错误现象：
– document.querySelector('input[type="radio"]:checked') 可能返回其他组的选中项（全局唯一匹配）
– 用 document.getElementsByName() 返回的是 HTMLCollection，得手动循环找 checked === true
- 推荐写法：
document.querySelector('input[name="user_gender"]:checked')—— 精准、简洁、可读性强 - 获取值：取到元素后读
.value，未选中时结果为null，记得判空 - 监听变化：对任意一个同
name的 radio 绑change事件即可，无需每个都绑（事件冒泡不适用，但同一组共享 name，一个 change 就代表组状态变了）
无障碍与语义：必须配 <label></label> 且关联 for 或嵌套
纯靠 input 自身点击区域太小，移动端难操作，屏幕阅读器也无法把文字说明和控件关联起来。不加 label 属于基础可访问性缺失。
使用场景：
– 所有正式上线的表单，尤其涉及用户身份、支付、权限等关键选择
– 内部系统也要考虑色弱、放大字体、键盘导航等需求
- 两种合法写法：
✓<label for="gender-m">男</label><input type="radio" id="gender-m" name="user_gender" value="male">
✓<label><input type="radio" name="user_gender" value="female">女</label> -
id和for值必须严格一致，大小写敏感；嵌套写法更简洁，但要注意不要包裹多余标签（如<div>） <li>别用 <code>onclick在span上模拟 label，那只是视觉欺骗，对辅助技术无效
单选按钮的“单”字，不在样式里，也不在 JS 里，就在那一行
name 属性里。漏掉它，后面所有交互、验证、无障碍都得返工。
