2：表单全选 + 取消全选

 

1）全选和取消全选

//思路：让下面所有复选框的 checked 属性 跟随上面的 全选按钮

2）下面的按钮影响全选按钮

//核心思路
//1 给下面所有复选框注册 点击事件
//2 每次点击 都要循环查看其它复选框是否有没有选中的
//3 如果有一个没有选中 上面全选就不选中
//4 可以设置一个变量 来控制全选是否选中

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>全选与取消全选</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        td {
            font: 14px "微软雅黑";
        }
        tbody tr {
            background-color: #f0f0f0;
        }
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>
<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="j_cbAll" />
            </th>
            <th>商品</th>
            <th>价钱</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <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>iPad Air</td>
            <td>2000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>Apple Watch</td>
            <td>2000</td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    //一 全选和取消全选：
    //核心思路：让下面复选框的checked属性 跟随上面的全选按钮
    //1 获取元素
    var quan = document.getElementById('j_cbAll');//获取到全选的input
    var inputs =document.getElementById('j_tb').getElementsByTagName('input');
    //2 给全选按钮添加事件
    quan.onclick = function(){
        //this.checked 可以得到复选框当前的选中状态 true选中 false未选中
        console.log(this.checked);
        //把全选复选框的选中状态 赋值给 下面的每一个复选框
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].checked = this.checked;
        }
    }
    //二 下面复选框 影响 全选复选框
    //1 给下面所有复选框注册 点击事件
    //2 每次点击 都要循环查看其它复选框是否有没有选中的的
    //3 如果下面的复选框按钮有一个没有选中 上面全选按钮就不选中
    //4 设置变量flag 来控制全选按钮 是否选中
    for (var i=0;i<inputs.length;i++) {
        inputs[i].onclick = function () { //外层循环给每一个复选框添加点击事件
            var flag = true;//控制全选按钮是否选中的变量
            //每次点击时 都要检查一下其他复选框是否选中
            for (var i=0; i<inputs.length; i++) {
                //如果有没有选中的 checked的值是false 执行if里面的代码
                if (!inputs[i].checked) {
                    flag = false;
                    break;//退出for循环 提高执行效率 因为有一个没有选中 剩下的也无需循环判断了
                }
            }
            quan.checked = flag;
        }
    }
</script>
</body>
</html>
posted @ 2021-02-22 14:45  棉花糖88  阅读(122)  评论(0)  编辑  收藏  举报