首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript获取radio选中值

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

2023-06-23 09:21:49 投稿：shichen2014

这篇文章主要介绍了JavaScript获取radio选中值的几种常用方法,结合实例形式总结分析了javascript获取radio选中值的常见实现方法与操作注意事项,需要的朋友可以参考下

一、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属性获取选中的值。

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”且被选中的radio元素，并获取其value属性。

二、JS获取radio选中的值的注意点

在使用JS获取radio选中的值时，需要注意以下几点：

1. 只能选择一个

radio只能选择一个，如果选中了多个，则会以最后选中的为准。因此，在JS中也只需获取被选中的一个。

2. 必须设置name属性

对于一组radio，必须设置相同的name属性，这样才能标识为同一组。

3. 必须设置value属性

对于每个radio，必须设置value属性，才能获取其值。

三、JS获取radio选中的值的兼容性问题

不同的浏览器对于JS获取radio选中的值的兼容性也不同。以下是一些常见的兼容性问题及解决方法：

1. IE6、7不能识别document.getElementsByName

解决方法：通过在name属性前加“.”或“#”来使用document.querySelectorAll来代替document.getElementsByName。

var radios = document.querySelectorAll('input[name="sex"]');

2. Firefox、Chrome、Safari不能识别document.all

解决方法：使用document.getElementById或document.getElementsByTagName来代替。

var radios = document.getElementsByName('sex');
//替换为
var radios = document.getElementsByTagName('input');

3. 获取的值为“on”

解决方法：改为获取checked属性的值。

var value = radio.value;
//替换为
var value = radio.checked;

四、总结

通过上面的内容，我们详细的了解了JS获取radio选中的值的几种方法，以及其注意点和兼容性问题。在实际开发中，应根据具体情况选择不同的方法来实现，以保证代码的简洁和稳定性。