javascript 获取单选按钮的值

发表于 更新于 分类于 ， Waline： 本文字数： 1.5k 阅读时长 ≈ 1 分钟

测试代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div onchange="show();">
    <input type="radio" name="fruits" value="Apple" checked="checked" />Apple
    <br>
    <input type="radio" name="fruits" value="Banana" />Banana
    <br>
    <input type="radio" name="fruits" value="Strawberry" />Strawberry
    <br>
    <input type="radio" name="fruits" value="watermelon" />watermelon
    <br>
    <input type="text" id="show">
    <br>
</div>
<script>
    function show() {
        document.getElementById('show').value = '你选择了: ' + getRadioValueByName('fruits');
    }
    // 根据单选按钮的name属性来获取这一组单选按钮的值
    function getRadioValueByName(name) {
        var value = "";
        //某个单选按钮组
        var radio = document.getElementsByName(name);
        //遍历该组的单选按钮
        for (var i = 0; i < radio.length; i++) {
            //判断用户选了哪个按钮
            if (radio[i].checked == true) {
                //找到
                value = radio[i].value;
                //不用找了
                break;
            }
        }
        //返回选择的值
        return value;
    } 
</script>

运行效果

Apple
Banana
Strawberry
watermelon