购物车案例（在后台拿购物车数据的案例）

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

扩展：

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

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

注意： 是change事件

易错点： 当重新渲染页面以后， 每一个input的事件会消失， 需要重新选择每一个input并绑定事件。

css片段：

        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        i,
        em,
        li,
        a {
            list-style: none;
            text-decoration: none;
            font-style: normal;
            color: none;
        }
        
        .shopCar {
            margin: 10px;
        }
        
        #allCheck {
            margin-bottom: 28px;
        }
        
        #shop-car li {
            width: 300px;
            border: 1px solid #000;
            display: flex;
            align-items: flex-start;
            flex-direction: column;
            justify-content: space-between;
            padding: 20px;
            margin-bottom: 10px;
        }
        
        #shop-car li img {
            width: 100px;
            height: 100px;
            margin: 20px 0;
        }
        
        .shopCar>span {
            display: block;
            margin-top: 15px;
        }

html片段：

    <div class="shopCar">
        <label for=""><input type="checkbox" id="allCheck" /> 全选</label>
        <ul id="shop-car">
            <!-- <li>
                <input type="checkbox">
                <span>iPhone 14 Pro Max (A2896)</span>
                <img src="https://img14.360buyimg.com/n5/s54x54_jfs/t1/214484/4/30522/43974/6474a1dfF683e290a/336b85e7a4bdaa83.jpg.avif">
                <span>￥2799.00</span>
                <span>总数量：</span>
                <span>256GB 暗紫色</span>
            </li> -->
        </ul>
        <span class="allSelect">已选中0件商品</span>
        <span class="allPrice">总价:￥0</span>
    </div>

js片段：

   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 uls = document.querySelector('#shop-car');
        let isAll = document.querySelector('#allCheck')

        init();

        // 全选按钮
        allCheck.onchange = function() {
            products.forEach(item => {
                item.goods_is_checked = this.checked;
            });
            init() // 重新渲染页面
        }

        // 渲染页面
        function init() {
            // 遍历数据源，渲染页面
            uls.innerHTML = products.reduce((s, item) =>
                s + `
                <li>
                    <input type="checkbox"${item.goods_is_checked?"checked":""}>
                    <span>名称：${item.goods_name}</span>
                    <img src="${item.goods_img}">
                    <span>价格：￥${item.goods_price}</span>
                    <span>总数量：${item.goods_num}</span>
                    <span>${item.goods_attr}</span>
                </li>
                `, '')
            Price();
            allChecks();
            setCheck();
        }

        // 总价、数量
        function Price() {
            let AllSelect = document.querySelector('.allSelect');
            let AllPrice = document.querySelector('.allPrice');
            let tnum = 0,
                tprice = 0;
            products.forEach(item => {
                tnum += item.goods_is_checked ? item.goods_num : 0;
                tprice += item.goods_is_checked ? item.goods_num * item.goods_price : 0;
            })
            AllSelect.innerHTML = `已选中${tnum}件商品`;
            AllPrice.innerHTML = `总价：￥${tprice}`;
        }

        // 全选全不选
        function allChecks() {
            isAll.checked = products.every(item => item.goods_is_checked);
        }

        // 绑定商品的选中事件
        function setCheck() {
            let inp = [...uls.querySelectorAll('input')];
            inp.forEach((item, index) => { // 添加事件
                item.onchange = function() {
                    products[index].goods_is_checked = this.checked; // 修改input全选状态
                    init(); // 渲染页面 
                }
            })
        }