全选和反选

在电商的购物车中，当将购物车中的商品全部选中的时候，其底部或首部全选标志也会被选中，当选中全选的标志的时候，购物车中的所有商品也会被选中。

image.png

使用js实现全选和反选的一个基本思路：
1.首先获取全选复选框和其他单个选项的复选框
2.当选中全选的时候，循环遍历下面的单个选项复选框，将其设置为选中状态
3.当选择单个选项的复选框的时候，每次点击都要进行判断，看是否所有的单项复选框全部都选中，如果都选中，则全选复选框也设置为选中状态
1.HTML页面结构和CSS样式为：

<style>
        .box {
            width: 20%;
            margin: 50px auto;
        }

        table {
            border: 1px solid red;
            border-collapse: collapse;
            border-spacing: 50px;
        }

        th,
        td {
            border: 1px solid #d0d0dd;
            border-collapse: collapse;
            padding: 20px;
        }

        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>
<div class="box">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="select_All" />
                    </th>
                    <th>商品</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody id="select_One">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Dell 灵越</td>
                    <td>8188</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>MacBook Air</td>
                    <td>18999</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Honor Magic</td>
                    <td>13999</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone 11</td>
                    <td>7999</td>
                </tr>
            </tbody>
        </table>
    </div>

2.js代码为：

<script>
        //首先将全选复选框的单个选项的复选框选出来
        var select_All = document.getElementById('select_All');
        var items = document.getElementById('select_One').getElementsByTagName('input');
        //当点击全选复选框的时候，全部选中
        select_All.onclick=function(){
            for(var i = 0; i < items.length; i++){
                items[i].checked = this.checked;
            }
        }
        for(var i = 0; i < items.length; i++){
            items[i].onclick=function(){
                var flag = true;
                //先要进行判断，看是否都选中
                for(var j = 0; j < items.length; j++){
                    if(!items[j].checked){
                        flag = false;
                        break;
                    }
                }
                select_All.checked = flag;
            }
        }
    </script>