【获取radio选中值】在网页开发中，`` 是一种常见的表单元素，用于让用户从多个选项中选择一个。当用户完成选择后，开发者通常需要获取用户所选的值，以便进行后续处理。本文将总结如何通过 JavaScript 获取 radio 选中值，并提供清晰的代码示例。
一、获取 radio 选中值的常用方法
获取 radio 选中值的核心思路是：
1. 通过 `document.querySelector()` 或 `document.getElementsByName()` 获取所有同名的 radio 元素。
2. 遍历这些元素，找到被选中的那个。
3. 读取其 `value` 属性作为结果。
二、常见实现方式对比
| 方法 | 说明 | 优点 | 缺点 |
| `document.querySelector('input[name="gender"]:checked')` | 使用 CSS 选择器直接获取选中的 radio | 简洁、直观 | 仅适用于单个选中项 |
| `document.getElementsByName('gender')` | 获取同名的所有 radio 元素 | 可遍历多个选项 | 需要手动判断是否被选中 |
| `document.querySelectorAll('input[type="radio"]')` | 获取所有 radio 元素并筛选出选中项 | 灵活、可扩展 | 性能略低（需遍历） |
三、具体代码示例
示例1：使用 `querySelector`
```javascript
const selectedValue = document.querySelector('input[name="gender"]:checked').value;
console.log(selectedValue);
```
示例2：使用 `getElementsByName` + 循环
```javascript
const radios = document.getElementsByName('gender');
let selectedValue = '';
for (let i = 0; i < radios.length; i++) {
if (radios[i].checked) {
selectedValue = radios[i].value;
break;
}
}
console.log(selectedValue);
```
示例3：使用 `querySelectorAll` + `find`
```javascript
const selectedRadio = document.querySelectorAll('input[type="radio"]').find(radio => radio.checked);
const selectedValue = selectedRadio ? selectedRadio.value : '未选择';
console.log(selectedValue);
```
四、注意事项
- 确保 name 属性一致：同一组 radio 按钮必须具有相同的 `name` 属性，否则无法正确识别。
- 处理未选中情况：如果用户未选择任何选项，应添加判断逻辑避免报错。
- 兼容性：上述方法在现代浏览器中均支持，但需注意旧版本兼容问题。
五、总结
获取 radio 选中值是前端开发中常见的需求，可以通过多种方式实现。根据项目实际需求选择合适的方法，可以提高代码的可读性和维护性。建议优先使用 `querySelector` 和 `querySelectorAll`，因为它们更简洁且易于理解。同时，注意对未选中情况进行处理，以增强程序的健壮性。
