复选框的全选和单选的实现 #31

zlluGitHub · 2018-07-24T08:30:35Z

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <div>
        <button type="text">按钮</button>
        <button type="text">按钮</button>
    </div>
    <div>
        <ul>
            <li><input type="checkbox" id="all"><label for="all">全选</label></li>
            <li><input class="single" type="checkbox" id="single1"><label for="single1">单选</label></li>
            <li><input class="single" type="checkbox" id="single2"><label for="single2">单选</label></li>
            <li><input class="single" type="checkbox" id="single3"><label for="single3">单选</label></li>
            <li><input class="single" type="checkbox" id="single4"><label for="single4">单选</label></li>
        </ul>
    </div>
    <script type="text/javascript">
        //获取绑定事件元素对象
        var all = document.querySelector('#all');
        var allSingle = document.querySelectorAll('.single');
        var allSinglelen = allSingle.length;
        //全选操作
        all.onchange = function(){
            var mark = this.checked;
            for (var i = 0; i < allSinglelen; i++) {
                allSingle[i].checked = mark;
            };
        };
        //单选操作 复选框每次改变都要循环遍历所有复选框
        for (var i = 0; i < allSinglelen; i++) {
            allSingle[i].onchange = function(){
                for (var j = 0; j < allSinglelen; j++) {
                    if(!allSingle[j].checked){
                        all.checked = false;
                        break;
                    }else{
                        all.checked = true;
                    };
                };
            };
        };
    </script>
</body>
</html>

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

复选框的全选和单选的实现 #31

复选框的全选和单选的实现 #31

zlluGitHub commented Jul 24, 2018

复选框的全选和单选的实现 #31

复选框的全选和单选的实现 #31

Comments

zlluGitHub commented Jul 24, 2018