应使用 document.querySelectorAll('inputtype="radio"').length 统计同名单选按钮数量，需确保 name 值严格一致；动态添加时须重新查询，可过滤 :not(:disabled) 获取可用项，避免误用 form.elements。
用 document.querySelectorAll 获取所有同名单选按钮
HTML 单选按钮（<input type="radio">）本身不提供“组总数”的属性，必须靠 JS 查询 DOM。关键在于：同一组单选按钮必须有相同的 name 属性值，这是浏览器识别它们为一组的唯一依据。
所以第一步是确认你要统计哪一组——比如 name="gender"，然后用：
const count = document.querySelectorAll('input[type="radio"][name="gender"]').length;
注意不能只写 input[name="gender"]，否则可能误抓到同名的 text 或 hidden 输入框。
动态添加的单选按钮要重新查询
如果单选按钮是 JS 动态插入（比如通过 innerHTML 或 appendChild 添加），querySelectorAll 不会自动更新。每次需要总数时，都得重新执行查询。
立即学习“前端免费学习笔记（深入）”；
常见错误是查一次存成变量，后续新增选项后仍用旧值——这会导致统计不准。
- ✅ 正确做法：把查询逻辑封装成函数，按需调用
- ❌ 错误做法：
const radios = document.querySelectorAll(...);然后长期复用radios.length - ⚠️ 注意：如果用了框架（如 Vue/React），DOM 可能异步更新，需在
nextTick或useEffect后查询
排除被 disabled 的选项（按需）
有时候你只想统计“可选”的数量，而不是所有带该 name 的单选按钮。这时加个伪类过滤：
const enabledCount = document.querySelectorAll('input[type="radio"][name="plan"]:not(:disabled)').length;
但注意：:not(:disabled) 在老版本 IE 中不支持；若需兼容 IE11，改用 .filter(el => !el.disabled)。
另外，disabled 元素不会被表单提交，也不会触发 change 事件，这点和视觉隐藏（display: none）不同——后者仍会被 querySelectorAll 匹配到。
为什么不用 form.elements？
有人会想到用表单的 elements 集合，比如 form.elements["gender"]。但它返回的是单个元素（如果只有一个）或 RadioNodeList（多个时），看似方便，但有坑：
- 如果页面没有包裹在
<form>里，这条路直接走不通 - 如果同名单选按钮跨多个表单，
form.elements只返回当前表单内的，容易漏数 -
RadioNodeList的.length在某些旧浏览器中可能不准（尤其动态增删后）
所以除非你明确控制了表单结构且不跨表单，否则 querySelectorAll 更直接、更可控。
真正容易被忽略的点是：单选按钮是否「真正属于同一组」，完全取决于 name 值是否严格一致（包括大小写和空格）。哪怕只差一个下划线，浏览器就当它是另一组——统计时得先人工核对 HTML 源码里的 name 是否统一。
