最快获取单选按钮选中值的方法是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，不管状态。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

也就是说：id 是个体标识，name 才是逻辑分组依据。服务端接收数据、浏览器强制互斥、JS 查状态，全靠 name。用 id 做组内状态判断，等于绕开机制硬编码，后期改名或增删选项极易出错。

• label 点击生效的前提是 for 和 id 匹配，但选中逻辑仍由 name 控制
• 不要用 id 替代 name 来实现分组，哪怕临时测试也不建议
• 调试时可在 Elements 面板里手动勾选，看对应 input 是否真出现 checked="" 属性——没出现说明 name 不一致或被 disabled 了

表单提交时后端收不到值？先盯住这三个地方

后端拿不到单选值，90% 不是后端问题，而是前端标识没对上。最常踩的坑是：

• name 拼写不一致：模板里写 name="user_type"，JS 里却查 userType；或者前后端约定用下划线，你写了驼峰
• 单选按钮被包在
  里——整组失效，连默认 checked 都不渲染
• 用了 form="xxx" 外挂表单，但目标
  标签不存在、被 JS 移除过、或还没加载完成

真正难排查的点在于：这些错误不会报 JS 异常，页面看起来一切正常，只是提交时字段消失。动手前打开开发者工具 Elements 面板，手动点选，确认 checked="" 是否真实出现在 DOM 上——不在，就不是 JS 获取逻辑的问题，而是 HTML 结构或状态绑定出了问题。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！