最快获取单选按钮选中值的方法是document.querySelector('input[name="gender"]:checked').value；若无选中则返回null，需判空；name必须大小写完全一致，:checked已隐含type限制，无需冗余书写。
用 document.querySelector 配合 :checked 最快拿到值
想从一组单选按钮里直接拿到当前被选中的那个，别遍历、别写循环——document.querySelector('input[name="gender"]:checked') 一行就解决。它返回的是 DOM 元素，再链式调用 .value 就是你要的值。
常见错误是用 document.getElementsByName("gender") 拿到 NodeList 后直接写 .value，这会报 undefined，因为 NodeList 没有 value 属性；也有人误写成 document.querySelector("input[type='radio'][name='gender']:checked").value，虽然能跑，但 type="radio" 是冗余的——:checked 本身只对 radio 和 checkbox 有效，而你已经用 name 锁定了组，加 type 反而拖慢选择器匹配速度。
-
name值必须完全一致（大小写敏感），比如name="Gender"和name="gender"是两组 - 如果没人选，
document.querySelector(...)返回null，取.value会报Cannot read property 'value' of null - 页面刚加载时就执行，可能拿到空值——除非你设了
checked属性，否则初始状态就是无选中
用 name 获取整组再手动找 checked 的适用场景
只有当你需要做额外判断（比如统计已选/未选项数量、批量重置、或兼容极老环境）时，才考虑用 document.querySelectorAll('input[name="theme"]') 拿全部，再遍历检查 .checked。
注意：getElementsByName 返回的是 HTMLCollection，不是数组，不能直接用 find 或 forEach；得先转数组或用 for...of。而且它不支持伪类，所以 document.getElementsByName("theme"):checked 这种写法根本无效——浏览器会直接报语法错误。
立即学习“前端免费学习笔记（深入）”；
- 别写
document.getElementsByName("theme")[0].value，这是在猜第一个是不是被选中，不可靠 -
querySelectorAll返回静态 NodeList，比getElementsByName更可控，推荐优先用 - 遍历时记得用
element.checked === true判断，而不是if (element.checked)，避免undefined或字符串干扰
id 能不能用来直接定位某个具体选项？
可以，但仅限于你知道确切 id 且目标明确时，比如预设“默认选 Java”后，要高亮对应 label 或禁用其他项。document.getElementById("lang_java") 能精准拿到那个元素，但它不告诉你“这一组里谁被选中了”——它只认 ID，不管状态。
也就是说：id 是个体标识，name 才是逻辑分组依据。服务端接收数据、浏览器强制互斥、JS 查状态，全靠 name。用 id 做组内状态判断，等于绕开机制硬编码，后期改名或增删选项极易出错。
- label 点击生效的前提是
for和id匹配，但选中逻辑仍由name控制 - 不要用
id替代name来实现分组，哪怕临时测试也不建议 - 调试时可在 Elements 面板里手动勾选，看对应
input是否真出现checked=""属性——没出现说明name不一致或被disabled了
表单提交时后端收不到值？先盯住这三个地方
后端拿不到单选值，90% 不是后端问题，而是前端标识没对上。最常踩的坑是：
-
name拼写不一致：模板里写name="user_type"，JS 里却查userType；或者前后端约定用下划线，你写了驼峰 - 单选按钮被包在
<fieldset disabled></fieldset>里——整组失效，连默认checked都不渲染 - 用了
form="xxx"外挂表单，但目标<form id="xxx"></form>标签不存在、被 JS 移除过、或还没加载完成
真正难排查的点在于：这些错误不会报 JS 异常，页面看起来一切正常，只是提交时字段消失。动手前打开开发者工具 Elements 面板，手动点选，确认 checked="" 是否真实出现在 DOM 上——不在，就不是 JS 获取逻辑的问题，而是 HTML 结构或状态绑定出了问题。
