ES6购物车渲染 全选全不选 数量 总价

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

扩展作业：

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

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

注意：是change事件

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

有已知数据

    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
            }
        ];

css 部分

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

        #shop-car li {
            border: 1px dotted red;
            margin: 10px 0;
            padding: 20px;
        }

        .container {
            width: 256px;
            padding: 20px;
        }
</style>

body 部分

    <div class="container">
        <input type="checkbox" id="isAllCheck" /> 全选

        <ul id="shop-car">
            <li>
                <input type="checkbox" checked />
                <p> <img src=""alt=""></p>
                <div>商品名称 : 华为P50</div>
                <div>商品价格 : 4999</div>
                <div>购买数量 : 10</div>
                <div>商品规格 : 极光白 12+128GB</div>
            </li>
        </ul>
        <p id="totalnum">总数量：</p>
        <p id="totalprice">总价格：</p>
    </div>

js  部分

        //查找元素
        let oUl = document.querySelector("#shop-car")
        let isAll = document.querySelector("#isAllCheck")

        renderPage();

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

        //1.渲染页面
        function renderPage() {
            //遍历数据源，渲染页面
            oUl.innerHTML = products.reduce((s, item) =>
                s + `<li>
                        <input type="checkbox" ${item.goods_is_checked ? "checked" : ""} />
                        <div>商品名称: ${item.goods_name}</div>
                        <img src="${item.goods_img}" alt="">
                        <div>商品价格:${item.goods_price}</div>
                        <div>购买数量:${item.goods_num}</div>
                        <div>商品规格:${item.goods_attr}</div>
                    </li>
                    `
                , '')

            computeNumPrice();
            checkAllCheck();
            setCheck();
        }

        //计算总价、总数量
        function computeNumPrice() {
            let tNumTxt = document.querySelector("#totalnum");
            let tPrcieTxt = document.querySelector("#totalprice");
            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
            })
            tNumTxt.innerHTML = `总数量：${tNum}`;
            tPrcieTxt.innerHTML = `总价格：${tPrice}`;
        }

        //判断全选状态
        function checkAllCheck() {
            isAll.checked = products.every(item => item.goods_is_checked)
        }

        //绑定商品的选中事件
        function setCheck() {
            let checkBtns = [...oUl.querySelectorAll('input')];//input数组
            checkBtns.forEach((item, index) => {//添加事件
                item.onchange = function () {
                    products[index].goods_is_checked = this.checked;//修改input对应数据源的状态
                    renderPage();//渲染页面
                }
            })
        }