页面渲染数据

需求：

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

 <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .wrap {
            width: 300px;
            margin: 10px auto;
        }

        .uls {
            border: 1px dashed red;
            margin: 10px;
            padding: 10px;
        }

        p {
            margin-left: 20px;
        }
    </style>

 <div class="wrap">
        <input type="checkbox" name="" id="">全选
        <div class="box"></div>
        <p>总数量: <span>0</span></p>
        <p>总价格: <span>0.00</span></p>
    </div>

 <script>
        let products = [{
                goods_name: '小米10-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: '小米10-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
            }
            // ,
            // {
            //     goods_name: '小米10-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: true
            // }
        ];
        let allinp = document.querySelector('.wrap>input');
        console.log(allinp);
        for (let i = 0; i < products.length; i++) {
            let uls = document.createElement('ul');
            // 添加类名
            uls.className = 'uls';
            // 赋值
            uls.innerHTML = `
            <input type="checkbox" name="" id="">
            <ul>
                <li>商品名称:${products[i].goods_name}</li>
                <li><img src="${products[i].goods_img}" alt=""></li>
                <li>商品价格:${products[i].goods_price}</li>
                <li>购买数量:${products[i].goods_num}</li>
                <li>商品规格:${products[i].goods_attr}</li>
                <li>是否选中:${products[i].goods_is_checked?'选中吧':'不选中啊'}</li>
            </ul>
            `;
            // 追加内容
            document.querySelector('.box').appendChild(uls);
            // 获取元素
            let inps = document.querySelectorAll('.box input');
            let spans = document.querySelectorAll('p span');
            // 判断products[i].goods_is_checked 是否是true 如果是则复选框选中否则不选中
            if (products[i].goods_is_checked) {
                inps[i].checked = true;
                spans[0].innerHTML = products[i].goods_num;
                spans[1].innerHTML = products[i].goods_num * products[i].goods_price;
            } else {
                inps[i].checked = false;
            }
            // 判断全选是否选中 如果是则所有复选框选中
            allinp.onchange = function () {
                if (allinp.checked) {
                    let a = [];
                    let b = [];
                    for (let i = 0; i < inps.length; i++) {
                        inps[i].checked = true;
                        a.push(products[i].goods_num);
                        b.push(products[i].goods_price*products[i].goods_num);
                    }
                    let sum = 0;
                    let prices =0;
                    a.forEach(function (item) {
                        sum += Number(item);
                    })
                    b.forEach(function (item) {
                        prices += Number(item);
                    })
                    spans[0].innerHTML = sum;
                    spans[1].innerHTML = prices;
                }
                // if (allinp.checked) {
                //     inps[i].checked = true;
                //     spans[0].innerHTML = products[i-1].goods_num+products[i].goods_num;
                //     spans[1].innerHTML = (products[i-1].goods_num * products[i-1].goods_price)+(products[i].goods_num * products[i].goods_price);
                // }
            };
        }
    </script>