1. 基础问题：获取选中Radio按钮的值
在HTML中，radio按钮通过一组相同的名称（name属性）进行关联。当用户选择其中一个时，其他选项会自动取消选中。然而，在JavaScript中，许多开发者尝试直接使用document.getElementsByName('radioName')来获取所有同名的radio按钮，却忽略了进一步筛选出被选中的那个。
例如：
let radios = document.getElementsByName('radioName');
console.log(radios); // 输出的是一个NodeList
这将返回一个包含所有同名radio按钮的NodeList，而不是具体的选中值。为了正确获取选中值，必须遍历这个列表并检查每个元素的checked属性。
1.1 使用循环筛选选中值
一种常见的方法是结合forEach或传统的for循环来逐一检查每个radio按钮的状态：
let radios = document.getElementsByName('radioName');
let selectedValue;
radios.forEach((radio) => {
if (radio.checked) {
selectedValue = radio.value;
}
});
console.log(selectedValue);
2. 进阶分析：常见错误与解决方案
尽管上述代码可以正常工作，但在实际开发中，仍然存在一些容易忽视的问题：
未选中任何选项的情况：如果用户没有选择任何radio按钮，selectedValue将保持为undefined。name属性不一致：如果页面中有多个radio按钮组，但它们的name属性设置错误或不一致，则可能导致无法正确获取目标组的值。
2.1 检查未选中情况
可以通过添加额外的逻辑来处理未选中情况：
let radios = document.getElementsByName('radioName');
let selectedValue = null;
for (let i = 0; i < radios.length; i++) {
if (radios[i].checked) {
selectedValue = radios[i].value;
break;
}
}
if (selectedValue === null) {
console.log("没有选中任何选项");
} else {
console.log("选中的值是：" + selectedValue);
}
3. 高级优化：简化代码结构
对于现代JavaScript开发，可以利用更简洁的语法来实现相同功能，同时提升代码可读性。
3.1 使用Array.prototype.find()
find()方法可以直接返回第一个满足条件的元素，从而避免显式循环：
let radios = Array.from(document.getElementsByName('radioName'));
let selectedRadio = radios.find(radio => radio.checked);
if (selectedRadio) {
console.log("选中的值是：" + selectedRadio.value);
} else {
console.log("没有选中任何选项");
}
3.2 性能与兼容性考虑
虽然find()方法更为简洁，但它需要将NodeList转换为数组（如使用Array.from()），可能在性能敏感场景下略逊于传统循环。
4. 实际案例流程图
以下是获取选中radio按钮值的完整逻辑流程：
graph TD;
A[开始] --> B{是否有同名radio？};
B --否--> C[报错：name属性不一致];
B --是--> D[获取NodeList];
D --> E{是否选中任意项？};
E --否--> F[返回null];
E --是--> G[找到选中项];
G --> H[返回选中值];