js全选复选框

原创于 2019-08-12 21:56:39 发布 · 241 阅读

CC 4.0 BY-SA版权

js复选框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            border-bottom: 3px solid #ccc;
            border-top: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="checkbox" name="all" value="全选" class="all">全选
    </div>
    <input type="checkbox" name="list" value="" class="son">
    <input type="checkbox" name="list" value="" class="son">
    <input type="checkbox" name="list" value="" class="son">
    <input type="checkbox" name="list" value="" class="son">
    <input type="checkbox" name="list" value="" class="son">
    <input type="checkbox" name="list" value="" class="son">
    <input type="checkbox" name="list" value="" class="son">

    <script>
        var all = document.getElementsByClassName("all")[0];
        var son = document.getElementsByClassName("son");
        var flag = true;
        all.onclick = function () {
            if (flag == true) {
                for (i = 0; i < son.length; i++) {
                    son[i].checked = true;
                }
                flag = false;
            } else {
                for (i = 0; i < son.length; i++) {
                    son[i].checked = false;
                }
                flag = true;
            }
        }
        var p;
        for (i = 0; i < son.length; i++) {
            son[i].onclick = function () {
                for (i = 0; i < son.length; i++) {
                    if (son[i].checked == true) {
                        p = true;
                    } else {
                        p = false;
                        break;//如果p为false直接退出循环，否则p会被覆盖，只有最后一个复选框起作用
                    }
                }
                if (p == true) {
                    all.checked = true;
                } else {
                    all.checked = false;
                }
            }
        }


    </script>
</body>

</html>