【小白学前端】JS案例：表单全选取消全选

最新推荐文章于 2024-05-15 10:25:09 发布

qq_43146801

最新推荐文章于 2024-05-15 10:25:09 发布

阅读量714

点赞数

分类专栏：前端学习文章标签： javascript 前端开发语言 html css

本文链接：https://blog.csdn.net/qq_43146801/article/details/126574173

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

要求：

1、点击全选按钮，可以选中所有产品前的选择框；
2、再点击一次，取消全选
3、每个产品可以单独选中取消
4、每个产品都选中时，全选框自动选中
5、取消一个产品的选择时，全选框自动取消

HTML和CSS部分

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        table {
            width: 300px;
            text-align: center;
            margin: 100px auto;
            border-collapse: collapse;
        }
        
        tr {
            height: 30px;
            line-height: 30px;
        }
        
        thead th {
            border: 1px solid #ccc;
            font-size: 14px;
            background-color: skyblue;
        }
        
        tbody td {
            background-color: rgb(237, 236, 236);
            font-size: 12px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <!-- 要求：1、点击全选按钮，可以选中所有产品前的选择框；
2、再点击一次，取消全选
3、每个产品可以单独选中取消
4、每个产品都选中时，全选框自动选中
5、取消一个产品的选择时，全选框自动取消 -->
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" class="all">
                </th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox">
                </td>
                <td>iphone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td><input type="checkbox">
                </td>
                <td>ipad Pro</td>
                <td>5000</td>
            </tr>
            <tr>
                <td><input type="checkbox">
                </td>
                <td>iphone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td><input type="checkbox">
                </td>
                <td>ipad Pro</td>
                <td>5000</td>
            </tr>
        </tbody>
    </table>

JS部分

Part I：取消和全选所有复选框，让下面所有的复选框状态跟随全选框即可

    var all = document.querySelector('.all')
        console.log(all);
        var proall = document.querySelector('tbody').querySelectorAll('input')
        all.onclick = function() {
                for (var i = 0; i < proall.length; i++) {
                    proall[i].checked = this.checked

                }
            }

Part II：下面的复选框状态一致时，影响上面的全选框

思路：给下面所有的复选框绑定事件，每次点击都循环查看是否有复选框没有选中，有的话，上面的全选框就不选中；没有的话上面的全选框就选中
注意：两个i包含在不同的作用域，相互之间的值不会有影响

方案1：监视所有复选框的状态，相乘得到全选框的状态0/1

//第一个for循环给所有复选框绑定事件
//第二个for循环，在每次点击复选框时检查所有复选框的状态
    for (var i = 0; i < proall.length; i++) {
            proall[i].onclick = function() {
                // console.log(+this.checked);
                // 每次点击下面的复选框，都要检查所有的复选框状态，以此决定全选按钮的状态
                var flag = 1;
                for (var i = 0; i < proall.length; i++) {
                    flag *= +proall[i].checked
                }
                if (flag == 1) {
                    all.checked = this.checked
                } else {
                    all.checked = false
                }
            }
        }

方案2：监视所有复选框的状态，有一个为false，则全选框状态为false（更简洁）

   for (var i = 0; i < proall.length; i++) {
            proall[i].onclick = function() {
                var flag = true;
                for (var i = 0; i < proall.length; i++) {
                    if (!proall[i].checked) {
                        flag = false;
                        break;
                    }
                }
                all.checked = flag;
            }

        }