JS获取radio选中值：原生与jQuery方法及兼容性问题详解

一、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方案，并明确了操作注意事项及跨浏览器兼容性问题。在实际开发中，建议根据项目需求、浏览器支持范围及代码简洁性要求，灵活选择最合适的方法，以确保代码的稳定性和可维护性。

JavaScript获取radio选中值的几种常用方法小结