首页 > 代码库 > radio单选按钮组操作

radio单选按钮组操作

2024-09-16 19:07:09   214人阅读

radio单选按钮组操作与checkbox复选组操作不同, 因为在一组单选按钮中, 你只要选择了其中一个(表现为checked=ture), 那么其他按钮会自动设置为fasle, 这里不留意就会产生bug, 关键是要搞清楚流程的控制。

比如现在有一个需求是通过一个toggle开关来动态切换两个按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        button {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div>
        <label for="">姓别</label>
        <input type="radio" name="sex" value="http://www.mamicode.com/male">男
        <input type="radio" name="sex" value="http://www.mamicode.com/female">女
    </div>
    <div>
        <button>toggle</button>
    </div>
    <div>
        <button>选择第一个</button>
    </div>
    <div>
        <button>第二个</button>
    </div>
    <div>
        <button>不选第一个</button>
    </div>
    <div>
        <button>不选第二个</button>
    </div>
</body>
<script type="text/javascript">var inputs = document.getElementsByName(‘sex‘);
    var index = 0;
    inputs[index].checked = true;

    var button1 = document.getElementsByTagName(‘button‘)[0];
    var button2 = document.getElementsByTagName(‘button‘)[1];
    var button3 = document.getElementsByTagName(‘button‘)[2];
    var button4 = document.getElementsByTagName(‘button‘)[3];
    var button5 = document.getElementsByTagName(‘button‘)[4];

    button1.onclick = function() {
        var inputs = document.getElementsByName(‘sex‘);
        for (var i = 0; i < inputs.length; i++) {
            if(inputs[i].checked==false) {
                inputs[i].checked = true; //这里有个坑啊, 在单选按钮中选择其中一个, 其他会自动为false, 这样循环就会有问题
                break; //当设置一个为true时应该跳出循环
            } else if(inputs[i].checked==true) {
                inputs[i].checked = false;
            }
        }
        console.log(inputs[0].checked); //false
        console.log(inputs[1].checked); //true
    }
    button2.onclick = function () {
        inputs[0].checked = true;
    }
    button3.onclick = function () {
        inputs[1].checked = true;
    }
    button4.onclick = function() {
        inputs[0].checked = false;
    }
    button5.onclick = function() {
        inputs[1].checked = false;
    }
</script>
</html>

重点是当设置一个为true了之后, 应该跳出循环。而且用radio按钮组做这种切换只适用于只有两个radio的情况, 如有多个使用checkbox逻辑会更简单

radio单选按钮组操作


联系
我们