使用 document.queryselectorall 选中同名 radio 按钮组需限定 name 属性，如 'inputtype="radio"'；nodelist 需转数组才能用 find 等方法；checked 表示当前选中状态，value 是提交值；reset 后 checked 仍反映 ui 状态，非初始属性。
用 document.querySelectorAll 选中同名 input[type="radio"]
单选按钮组靠 name 属性绑定，所以不能只查 type="radio"，否则会拿到页面所有单选框。必须限定在同一个 name 下，比如 name="gender" 的选项：
document.querySelectorAll('input[type="radio"][name="gender"]')
返回的是 NodeList，可直接用 forEach 遍历。注意别漏写引号——[name=gender]（没引号）在值含特殊字符时会报错或匹配失败。
遍历时读取 checked 和 value 要分清语义
每个 input 元素的 checked 是布尔值，表示当前是否被选中；value 是提交时发送的字符串值。常见误操作是把 checked 当成“是否可选”（实际是 disabled 控制），或者想当然认为 value 一定存在（空 value 会导致提交空字符串）。遍历时建议这样写：
document.querySelectorAll('input[name="theme"]').forEach(radio => {
console.log(radio.value, radio.checked);
});
用 Array.from() 或扩展运算符转数组才好用 find / some
NodeList 不支持 find、some、map 等数组方法，直接调会报 TypeError: NodeList.prototype.find is not a function。得先转成真数组：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
Array.from(document.querySelectorAll('[name="mode"]'))- 或更简洁：
[...document.querySelectorAll('[name="mode"]')]
转完就能安全地写 [...radios].find(r => r.checked) 拿到当前选中的项，不用自己写循环判断。
注意表单重置后 checked 状态可能滞后
如果用户手动点击过某个选项，又点了表单的 reset()，DOM 中的 checked 属性不会自动同步回初始状态（HTML 的 checked 属性只在加载时生效）。此时 radio.checked 返回的是当前 UI 状态，而 radio.hasAttribute('checked') 才反映原始 HTML 是否带 checked。多数场景下你关心的是用户当前选了谁，所以用 .checked 没问题；但做“恢复默认”逻辑时，得提前记下初始选中项，不能依赖属性检测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
