用js实现购物车功能（函数封装）

要求：

1. 有已知购物车数据，渲染页面，根据每一个商品中的选中状态决定全选状态、总数量和总价格

2. 点击全选按钮，改变所有购物车商品的选中状态

3. 点击每一个商品状态以后，相应的改变全选状态（数量和总价也相应的改变）

HTML
 

 <table cellspacing="0" border="1">
        <thead>
            <tr>
                <td><label>全选<input type="checkbox"></label></td>
                <td>商品</td>
                <td>图片</td>
                <td>规格</td>
                <td>价格</td>
                <td>数量</td>
                <td>小计</td>
            </tr>
        </thead>
        <tbody>
            <!-- 
                <tr>
                    <td> <input type="checkbox"></td>
                    <td>小米12 </td>
                    <td><img src="https://img12.360buyimg.com/n0/s80x80_jfs/t1/118064/27/12885/59959/5f17b7efE453f688d/5b33ac76b2aaea9b.jpg"
                            alt=""></td>
                    <td> 砂石黑4GB+64GB</td>
                    <td> 500</td>
                    <td> <button>+</button> 10 <button>-</button></td>
                    <td>5000</td>
                </tr> -->
        </tbody>
        <tfoot>
            <tr>
                <td>总价：</td>
                <td class="allprice"></td>
                <td>总数量：</td>
                <td class="allnum"></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tfoot>
    </table>

CSS

  table {
            text-align: center;
        }

        tbody td {
            width: 100px;

        }

        tbody td span {
            display: inline-block;
            width: 20px;
            cursor: pointer;
        }

Javascript

 let products = [
            {
                goods_name: '小米12-1',
                goods_img: 'https://img12.360buyimg.com/n0/s80x80_jfs/t1/118064/27/12885/59959/5f17b7efE453f688d/5b33ac76b2aaea9b.jpg',
                goods_price: '500',
                goods_attr: '砂石黑4GB+64GB',
                goods_num: 10,
                goods_is_checked: true
            },
            {
                goods_name: '小米12-2',
                goods_img: 'https://img12.360buyimg.com/n0/s80x80_jfs/t1/118064/27/12885/59959/5f17b7efE453f688d/5b33ac76b2aaea9b.jpg',
                goods_price: '510',
                goods_attr: '砂石黑4GB+64GB',
                goods_num: 50,
                goods_is_checked: false
            }
        ]
 let tbody = document.querySelector('tbody');
        let allheked = document.querySelector('thead tr td input');
        init();
        //全选
        allheked.addEventListener('change', function () {
            products.forEach(item => {
                item.goods_is_checked = this.checked;
            })
            init();
        })
        //渲染页面
        function init() {
            tbody.innerHTML = products.reduce((s, item) =>
                s + `
                <tr>
                <td> <input type="checkbox" ${item.goods_is_checked ? 'checked' : ''}></td>
                <td>${item.goods_name}</td>
                <td><img src="${item.goods_img}"
                        alt=""></td>
                <td> ${item.goods_attr}</td>
                <td class = "price"> ${item.goods_price}</td>
                <td><span class = "add">+</span> <span class = "num">${item.goods_num}</span> <span class = "remove">-</span></td>
                <td class = "subtotal">${item.goods_num * item.goods_price}</td>
            </tr>
                `
                , '')
            All();
            allcheck();
            everycheck();
            subtotal();
        }
        //计算总价总数量
        function All() {
            let num = document.querySelector('tfoot .allnum');
            let price = document.querySelector('tfoot .allprice')
            let allnum = 0, allprice = 0;
            products.forEach(item => {
                allnum += item.goods_is_checked ? item.goods_num : 0;
                allprice += item.goods_is_checked ? item.goods_price * item.goods_num : 0;

            })

            num.innerHTML = allnum;
            price.innerHTML = allprice;
        }
        //判断全选状态
        function allcheck() {
            allheked.checked = products.every(item => item.goods_is_checked)
        }

        //绑定商品的选中事件 (反选)
        function everycheck() {
            let check = [...tbody.querySelectorAll('input')];
            check.forEach((item, index) => {
                item.onchange = function () {
                    products[index].goods_is_checked = this.checked;
                    init();
                }
            })
        }

        //小计
        function subtotal() {
            let ad = tbody.querySelectorAll('.add');
            let re = tbody.querySelectorAll('.remove');
            let smallprice = document.querySelectorAll('.subtotal');
            products.forEach((item, index) => {
                ad[index].onclick = function () {
                    item.goods_num += 1;
                    init();
                }
                re[index].onclick = function () {
                    item.goods_num = item.goods_num <= 1 ? 1 : item.goods_num - 1;
                    // item.goods_num -= 1;
                    // if (item.goods_num <= 1) {
                    //     item.goods_num = 1;
                    // }
                    init();
                }
            })

        }