直接用 document.queryselector('input[name="color"]:checked') 获取单选组中已选中的元素，若未选中则返回 null，需判空处理。
用 document.querySelector 配合属性选择器，直接获取该分组中被选中的那个 input[type="radio"] 元素即可。
通过 name 属性定位分组并查找已选中的项
单选框靠 name 属性组成逻辑分组，同一组的 radio 必须有相同的 name 值。要获取当前选中的那个，只需：
- 使用 CSS 选择器
input[name="group-name"]:checked -
document.querySelector()返回第一个匹配元素（单选组里最多一个被选中，所以刚好） - 如果没选中任何项，返回
null，记得判空
示例 HTML：
蓝色
绿色
对应 JS：
const selected = document.querySelector('input[name="color"]:checked');if (selected) {
console.log(selected.value); // 输出 "blue"
} else {
console.log('未选择任何选项');
}
获取所有同名 radio 并遍历检查（兼容老写法或需额外处理时）
如果需要更灵活的控制（比如收集所有选项、做状态重置等），可先获取全部，再筛选：
- 用
document.querySelectorAll('input[name="color"]')拿到 NodeList - 用
Array.from().find()或for...of找出checked === true的那个 - 比
querySelector略重，但适合批量操作场景
注意点：name 值要准确，且不能含特殊字符
如果 name 是动态生成或含空格、括号等，CSS 选择器需转义或改用属性匹配语法：
- 例如
name="user[preference]"→ 选择器写成input[name="user\[preference\]"]:checked - 更稳妥的方式是用
document.querySelector('input[type="radio"][name="xxx"]:checked')明确限定类型 - 确保 DOM 已加载完成（放在
DOMContentLoaded事件里或脚本放底部）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
