JS基础-全选与取消全选案例

主要需要完成的功能有两个：

1.选择上面的全选按钮之后下面的按钮全部被选中，取消全部的按钮就取消全选。

2.每次点击下面按钮就去检查是不是所有的按钮都选中了,要是所有的按钮都选中了把最上面的全选按钮就要选中,要是有一个没选中上面全选按钮就不选中。

实现思路：

1.针对第一个功能，可以采用一个flag变量来判断，设置初始值为0也就是全选按钮不选中，然后点击全选按钮判断，判断flag是否为0，如果为0就把所有的下面按钮选中，同时把flag变为1，如果flag为1，则把下面的按钮的checked都变为false，同时把flag变为0。

2.针对第二个功能就要相对复杂一点。给下面的按钮添加循环点击事件，然后把temp变量设为true，然后再循环判断是不是所有按钮的checked都为true，如果有一个为false就把temp变为false，最后把temp的值赋给全选按钮的checked。

完整代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选与取消全选案例</title>
    <style>
        table {
            width: 200px;
            height: 150px;
            background-color: #eef1ee;
            border-collapse: collapse;
            border: 1px solid #fff;
            color: #404762;
            font-size: 10px;
        }
        
        table thead {
            background-color: #0099cc;
            color: #fff;
            text-align: center;
        }
    </style>
</head>

<body>
    <table cellpadding="5" cellspacing="0" border="1">
        <thead>
            <th>
                <input type="checkbox" name="" id="">
                <td>商品</td>
                <td>价钱</td>
            </th>
        </thead>
        <tbody>
            <tr>
                <td> <input type="checkbox" name="" id=""></td>
                <td>iPhone8</td>
                <td>5000</td>

            </tr>
            <tr>
                <td> <input type="checkbox" name="" id=""></td>
                <td>iPad pro</td>
                <td>5000</td>

            </tr>
            <tr>
                <td> <input type="checkbox" name="" id=""></td>
                <td>iPad Air</td>
                <td>2000</td>

            </tr>
            <tr>
                <td> <input type="checkbox" name="" id=""></td>
                <td>Apple Watch</td>
                <td>2000</td>
            </tr>
        </tbody>
    </table>
    <script>
        // 1.功能1，选择上面的全选按钮之后下面的按钮全部被选中，取消全部的按钮就取消全选
        var headcheck = document.querySelector('thead').querySelector('input');
        // 默认是没有选中
        var flag = 0;
        // 获取全部的小选择框
        var bodycheck = document.querySelector('tbody').querySelectorAll('input');
        headcheck.onclick = function() {
            if (flag == 0) {
                for (var i = 0; i < bodycheck.length; i++) {
                    bodycheck[i].checked = true;
                }
                flag = 1;
            } else {
                for (var i = 0; i < bodycheck.length; i++) {
                    bodycheck[i].checked = false;
                }
                flag = 0;
            }
        }

        //2.功能2 每次点击下面按钮完毕就去检查是不是所有的按钮都选中了,要是所有的按钮都选中了把最上面的选中,要是有一个没选中上面的就不变
        for (var i = 0; i < bodycheck.length; i++) {
            bodycheck[i].onclick = function() {
                var temp = true; //默认没有全部选中
                console.log(temp);
                for (var j = 0; j < bodycheck.length; j++) {
                    if (!bodycheck[j].checked) {
                        temp = false;
                    }
                }
                headcheck.checked = temp;
            }
        }
    </script>
</body>

</html>

JS基础-全选与取消全选案例

猜你喜欢