最轻量方式是document.queryselector('input[name="xxx"]:checked')，返回首个选中元素或null；错误写法如form.xxx.value总取首项值，忽略选中状态；动态name应存于data-radio-name属性。
用 querySelector 查找同名 radio 并检查 :checked
直接查 document.querySelector('input[name="xxx"]:checked') 是最轻量、兼容性最好的方式。它返回第一个被选中的元素（或 null），不需要遍历，也不依赖 jQuery。
常见错误是写成 document.querySelector('input[name="xxx"]').value —— 这会取到第一个 radio 的 value，无论它是否被选中；或者漏掉 :checked 伪类，导致永远读不到真实状态。
- 同一
name组下，最多只有一个:checked元素，所以查一次就够了 - 如果返回
null，说明该组没被选中；否则说明已选中 - 要取值？直接读
element.value，不用再查一遍
const selected = document.querySelector('input[name="theme"]:checked');
if (!selected) {
console.log('未选择主题');
} else {
console.log('当前主题：', selected.value);
}
用 querySelectorAll 配合 .length 判断是否至少一个被选中
当你只关心“有没有选”，不关心具体哪个时，querySelectorAll('input[name="xxx"]:checked').length > 0 更直观。它天然规避了 null 判空问题，语义也更贴近业务逻辑（如“请至少选择一项”）。
注意别漏写 type="radio"：只写 [name="xxx"]:checked 可能意外匹配到同名的 checkbox 或其他 input，尤其在复杂表单里。
- 推荐写法：
document.querySelectorAll('input[type="radio"][name="xxx"]:checked') - 旧浏览器（IE8-）不支持
:checked，但现代项目基本可忽略 - 性能上无差别，
querySelectorAll会短路优化，找到匹配就停
别用 form.xxx.value 访问 radio 组
form 元素的属性访问（如 frmMain.gender.value）对 radio 组无效——它只返回第一个 radio 的 value，不管是否被选中。这是初学者高频踩坑点，尤其从 text/textarea 逻辑直接套用过来时。
本质原因是：radio 组在表单对象上暴露的是一个 RadioNodeList（类数组），不是单个值。JS 不会自动帮你找 :checked 项。
- 错误示例：
document.getElementById('frmMain').gender.value→ 总是返回第一个 radio 的 value - 正确替代：
document.querySelector('input[name="gender"]:checked')?.value - 如果要用表单 API，得走
FormData：new FormData(frmMain).get('gender')，它内部已处理 checked 逻辑
动态 name 场景下避免硬编码字段名
多步骤表单或模板渲染时，radio 组名可能是变量（如 "q_step_2"），不能写死字符串。这时把 name 存在按钮的 data-radio-name 属性里最稳妥，比靠命名规则拼接（如 "m_" + button.name）更清晰、易维护。
拼接容易出错：大小写不一致、前缀遗漏、按钮 name 和 radio name 实际不对应，调试时很难一眼发现。
- HTML 示例：
<button data-radio-name="q_step_2">下一步</button> - JS 示例：
const name = button.dataset.radioName;然后传给querySelector - 服务端渲染或框架中，优先让模板直接注入 name，而不是靠 JS 推导
disabled，它们的 :checked 状态依然存在，但提交时不会发出去。是否要跳过 disabled 项，得根据业务定——多数情况应排除，否则用户看到“已选中”却无法提交，体验断裂。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
