JavaScript实现购物车的全选反选功能：

JavaScript实现购物车的全选反选功能：
勾选全选，全部选中购物车中的商品。点击反选选择未被选中的商品，已选中的商品将不被选中。
效果图如下：

源码如下：
HTML部分：

<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>iPhone13</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>
        <input type="button" value="  反 选  " id="btn">
    </div>

CSS部分：

<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: #ff3040;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        
        td {
            font: 14px "微软雅黑";
        }
        
        tbody tr {
            background-color: #f0f0f0;
        }
        
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
        
        #btn {
            margin-top: 10px;
        }
    </style>

JavaScript部分：
重点看注释一步步分析

<script>
        var j_cbAll = document.querySelector('#j_cbAll');
        var j_tb = document.querySelector('#j_tb');
        var inp = j_tb.getElementsByTagName('input');
        var btn = document.getElementById('btn')
            // console.log(inp);
            // 1 全选
            // 1.1 获取父checkbox，注册点击事件
        j_cbAll.onclick = function() {
                // 1.2 找到所有子的checkbox，让这些checkbox的状态跟父checkbox保持一致
                for (var i = 0; i < inp.length; i++) {
                    inp[i].checked = j_cbAll.checked;
                }
            }
            // 2 当点击子的checkbox，如果所有的子的checkbox都被选中了，让父的checkbox也选中
            // 如果有一个子的checkbox没有被选中，父的checkbox也不被选中
            // 此处的循环，是遍历所有子的checkbox，注册点击事件
        for (var i = 0; i < inp.length; i++) {
            // 给子的checkbox注册点击事件
            // inp[i].onclick = function() {
            //     // 假设所有的子的checkbox都被选中了
            //     var isAll = true
            //     for (var i = 0; i < inp.length; i++) {
            //         // 判断子元素选中状态
            //         if (!inp[i].checked) {
            //             isAll = false
            //         }
            //     }
            //     // 设置父的checkbox的状态
            //     j_cbAll.checked = isAll
            // }
            inp[i].onclick = fn
        }
        // 3 反选
        // 3.1 给反选按钮注册点击事件
        btn.onclick = function() {
                // 3.2 找到所有的子的checkbox，让其反选
                for (var i = 0; i < inp.length; i++) {
                    inp[i].checked = !inp[i].checked
                }
                fn()
            }
            // 判断父的checkbox的状态 封装成函数
        function fn() {
            var isAll = true
            for (var i = 0; i < inp.length; i++) {
                // 判断子元素选中状态
                if (!inp[i].checked) {
                    isAll = false
                }
            }
            // 设置父的checkbox的状态
            j_cbAll.checked = isAll
        }
    </script>

实现上述功能还有很多的方法，有更简单的方法请各位大佬评论区留言，共同探讨。