JavaScript获取radio选中值的几种常用方法小结
本文总结了JavaScript获取radio选中值的三种常用方法：使用document.getElementsByName遍历、document.querySelector直接选取以及jQuery选择器。同时详细说明了radio单选机制、name与value属性的必要性，并针对IE6/7及Firefox等浏览器的兼容性问题提供了具体解决方案，帮助开发者在实际项目中选择合适方案。
一、JS获取radio选中的值
在网页开发中，获取单选按钮（radio）的选中状态及对应值是一个常见需求。以下是几种实现该功能的常用技术手段。
1. 使用document.getElementsByName获取radio选中的值
<script>
function getRadioValue(){
var radios = document.getElementsByName('sex');
for(var i=0; i<radios.length; i++){
if(radios[i].checked){
alert("您选择的是：" + radios[i].value);
break;
}
}
}
</script>
<body>
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
<br />
<input type="button" value="确定" onclick="getRadioValue()">
</body>上述代码示例中，首先通过document.getElementsByName方法获取所有name属性为“sex”的radio元素集合。随后遍历该集合，利用checked属性判断哪个元素被选中，并输出其value值。
2. 使用document.querySelector获取radio选中的值
<script>
function getRadioValue(){
var radio = document.querySelector('input[name="sex"]:checked');
alert("您选择的是：" + radio.value);
}
</script>
<body>
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
<br />
<input type="button" value="确定" onclick="getRadioValue()">
</body>在上述代码中，利用document.querySelector方法直接选取name为“sex”且处于选中状态的radio元素。若用户未选中任何选项，该方法将返回null。
3. 使用jQuery获取radio选中的值
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$('input[name="sex"]').click(function(){
var value = $('input[name="sex"]:checked').val();
alert("您选择的是：" + value);
});
});
</script>
<body>
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
</body>上述代码展示了如何使用jQuery库。通过监听点击事件，使用选择器获取name为“sex”且被选中的元素，并调用.val()方法获取其value属性值。
二、JS获取radio选中的值的注意点
在使用JavaScript处理radio控件时，需关注以下关键事项：
1. 只能选择一个
单选按钮（radio）的设计逻辑决定了同一组内只能有一个选项被选中。若存在多个选中状态，系统通常以最后操作的选项为准。因此，在JS逻辑中只需定位并获取那个被选中的单一元素即可。
2. 必须设置name属性
对于属于同一组的radio元素，必须赋予相同的name属性值。这是浏览器识别它们为互斥组的关键标识，否则无法实现单选逻辑。
3. 必须设置value属性
每个radio元素都必须明确设置value属性。只有设置了该属性，JavaScript才能通过该属性获取到具体的数值或字符串，否则无法正确读取用户的选择结果。
三、JS获取radio选中的值的兼容性问题
不同浏览器对JavaScript API的支持存在差异，导致获取radio选中值时可能出现兼容性问题。以下是常见场景及对应的解决策略：
1. IE6、7不能识别document.getElementsByName
解决方案：在name属性前添加“.”或“#”前缀，改用document.querySelectorAll方法替代document.getElementsByName，以兼容旧版IE浏览器。
var radios = document.querySelectorAll('input[name="sex"]');2. Firefox、Chrome、Safari不能识别document.all
解决方案：避免使用document.all，改用document.getElementById或document.getElementsByTagName等标准DOM方法获取元素，以确保在现代浏览器中的兼容性。
var radios = document.getElementsByName('sex');
//替换为
var radios = document.getElementsByTagName('input');3. 获取的值为“on”
解决方案：当直接获取value属性返回“on”时，应改为获取checked属性的布尔值，以准确判断选中状态。
var value = radio.value;
//替换为
var value = radio.checked;四、总结
通过上述内容，我们详细了解了JavaScript获取radio选中值的多种实现方式，包括原生JS的两种方法及jQuery方案，并明确了操作注意事项及跨浏览器兼容性问题。在实际开发中，建议根据项目需求、浏览器支持范围及代码简洁性要求，灵活选择最合适的方法，以确保代码的稳定性和可维护性。
JS监听滚动事件：回到顶部按钮的显示与隐藏逻辑
2026-11-05 16:19:37
JavaScript怎么读写LocalStorage与SessionStorage
2026-11-05 15:40:11
anime.js 与 GSAP 对比：轻量级项目该怎么选择动画库
2026-11-05 11:24:55
flv.js 与 hls.js 在直播场景下的选型对比
2026-11-05 08:18:52
JavaScript能做什么？前端开发中的作用与应用场景解析
2026-11-04 23:17:54