JavaScript——全选中，全不选中

<!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>
        table{
            margin: 100px auto;
            text-align: center;
            width: 200px;
            height: 100px;
        }
        thead{
            background-color: rgb(28, 129, 245);
        }
    </style>
</head>

<body>
    <table border="1" cellpadding=0 cellspacing=0>
        <thead>
            <tr>
                <td><input type="checkbox" name="" id="j_ckall"></td>
                <td>演员</td>
                <td>价格</td>
            </tr>
        </thead>
        <tbody id="j_tb">
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>张译</td>
                <td>无价</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>刘烨</td>
                <td>无价</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>大碗面</td>
                <td>赠品</td>
            </tr>
        </tbody>
    </table>
    <script>
     //获取全选的复选框id
        var ckall = document.getElementById("j_ckall");
        //获取tbody中所有的复选框
        var tb = document.getElementById("j_tb").getElementsByTagName("input");
        //给全选的复选框注册点击事件，并添加事件函数
        ckall.onclick = function () {
            //遍历tbody中所有的复选框
            for (var i = 0; i < tb.length; i++) {
                //把全选复选框的选中结果赋值给tbody中的每一个复选框
                tb[i].checked = this.checked;
            }
        }
        //遍历tbody中所有的复选框
        for (var i = 0; i < tb.length; i++) {
            //分别注册点击事件
            tb[i].onclick = function () {
                //假设默认为全选中
                var flag = true;
                //遍历tbody中所有的复选框
                for (var j = 0; j < tb.length; j++) {
                    //判断tbody中所有的复选框是否有一个没被选中的
                    if (!tb[j].checked) {
                        //如果!tb[j].checked成立，说明tbody中有一个没被选中的复选框，此时把flag赋值为false
                        flag = false;
                        //跳出循环
                        break;
                    } //end if
                } //end for
                //flag的值赋值给全选框
                ckall.checked = flag;
            } //end function
        } //end for
    </script>
</body>

</html>
JavaScript——全选中，全不选中

猜你喜欢
