一、基础概念：Radio按钮的HTML结构

在HTML中，单选按钮（Radio Button）使用元素创建。通常多个Radio按钮共享相同的name属性，以确保只能选择一个选项。

Male

Female

Other

上述代码中，三个Radio按钮的name属性都为gender，浏览器会自动处理互斥选择逻辑。

二、原生JavaScript获取Radio选中值

1. 使用querySelectorAll方法

可以通过document.querySelectorAll选择所有具有相同name属性的Radio按钮，并遍历获取选中项。

function getSelectedRadioValue(name) {

const radios = document.querySelectorAll(`input[name="${name}"]`);

for (let radio of radios) {

if (radio.checked) {

return radio.value;

}

}

return null; // 如果没有选中项

}

2. 使用document.querySelector的简写方式

const selected = document.querySelector('input[name="gender"]:checked');

const value = selected ? selected.value : null;

该方式利用CSS伪类:checked直接获取选中的Radio按钮。

三、jQuery方式获取Radio选中值

1. 使用jQuery的:radio和:checked选择器

var selectedValue = $('input[name="gender"]:radio:checked').val();

如果没有任何Radio被选中，selectedValue将为undefined，因此建议进行空值判断。

2. 增强版本：处理未选中情况

var selectedValue = $('input[name="gender"]:checked').val() || 'default';

该方式设置默认值，避免后续处理中出现错误。

四、常见问题与解决方案

问题原因解决方法获取值为undefined或null没有Radio被选中时，获取的元素为null添加空值判断逻辑，如使用三元运算符或默认值无法正确获取选中项Radio按钮的name属性不一致或拼写错误检查HTML结构，确保name属性一致动态添加Radio按钮后无法获取DOM未加载完成或动态元素未绑定事件使用事件委托或确保DOM加载后再执行获取逻辑

五、性能与最佳实践

避免频繁操作DOM，尽量缓存查询结果。在表单提交前进行验证时，使用原生JavaScript更轻量。对于复杂交互，jQuery提供了更简洁的语法，但应权衡是否引入jQuery库。使用现代ES6语法（如箭头函数）提升代码可读性。

六、流程图：获取Radio按钮选中值的逻辑

graph TD

A[开始] --> B{是否存在选中Radio?}

B -->|是| C[获取value值]

B -->|否| D[返回null或默认值]

C --> E[结束]

D --> E