表单全选 取消全选的案例

		* {
            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;
        }

<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>

// 我们可以通过input标签的checked属性来实现这个案例

        // 我们先完成 由上面的复选框来控制下面复选框的全选与全不选

        var j_cbAll = document.querySelector('#j_cbAll'); // 获取上面的复选框 
        // console.log(j_cbAll);  我们可以边做边打印 保持良好的习惯 以免出错
        var j_tb = document.querySelector('#j_tb').querySelectorAll('input');  // 获取下面的复选框

        // 给上面的 复选框添加点击事件
        j_cbAll.onclick = function() {
            // console.log(j_cbAll.checked); 点击时 复选框选中打印结果为true 未选中时则为false
            // 让下面每个复选框的checked的值和上面的复选框一样
            for (var i = 0; i < j_tb.length; i++) { 
                j_tb[i].checked = this.checked;
            }
        }

        // 接下来我们做 下面的复选框都被选中时上面的才被选中
        // 给下面的每个复选框绑定点击事件
        for (var i = 0; i < j_tb.length; i++) {
            j_tb[i].onclick = function() { 
                // 创建一个变量 用于决定上面复选框的状态
                var flag = true;               
                // 进行循环判定 如果有一个没有被选中 上面的则不会被选中
                for (var i = 0; i < j_tb.length; i++) {   
                    if (!j_tb[i].checked) {
                        flag = false;
                        break;
                    }
                }
                j_cbAll.checked = flag;
            }
        }