购物车实例演示 -

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车-2</title>
    <link rel="stylesheet" href="css/demo3.css">
</head>
<body>
    <div class="box">
        <!-- 全选框 -->
        <div class="selectAll">
            <input type="checkbox" class="check-all" name="check-all" onchange="checkAll()" checked>
            <label for="check-all">全选</label>
        </div>
        <!-- 商品列表 -->
        <ul class="list">
            <li>
                <span>选择</span>
                <span>品名</span>
                <span>数量</span>
                <span>单价</span>
                <span>金额</span>
             </li>
            <li>
                <input type="checkbox" onchange="checkItems()" checked>
                <span class="content">吹风机</span>
                <input type="number" value="1" min="1" class="num">
                <span class="price">100</span>
                <span class="amount">0</span>
            </li>
            <li>
                <input type="checkbox" onchange="checkItems()" checked>
                <span class="content">电脑</span>
                <input type="number" value="2" min="1" class="num">
                <span class="price">2000</span>
                <span class="amount">0</span>
            </li>
            <li>
                <input type="checkbox" onchange="checkItems()" checked>
                <span class="content">相机</span>
                <input type="number" value="3" min="1" class="num">
                <span class="price">1500</span>
                <span class="amount">0</span>
            </li>
            <li>
                <span>总计:</span>
                <span class="total-num">0</span>
                <span class="total-amount">0</span>
            </li>
        </ul>
        <button class="account">结算</button>
    </div>
    <script>
        //全选
        function checkAll() {
            let status=event.target.checked;
            console.log(status);
        //子商品状态
        document
            .querySelectorAll(".list li input[type='checkbox']")
            .forEach((item)=>(item.checked=status));
        autoCalculate();
        }
        function checkItems() {
            //全部商品
            let items = document.querySelectorAll(".list li input[type='checkbox']");
            //判断状态
            let status=[...items].every((item)=>item.checked===true);
            console.log(status);
            document.querySelector('.check-all').checked=status;
            autoCalculate();
        }
        const nums=document.querySelectorAll('.num');
        // console.log(nums);
        //商品是否被选中
        function goodStatus(numArr){
            let items =document.querySelectorAll(".list li input[type='checkbox']");
            return numArr.map((num,index)=>{
                if (items[index].checked===false){
                    return (num=0);
                } else {
                    return num;
                }
            });
        }
        //计算总数量
        function getTotalNum(numArr) {
            numArr=goodStatus(numArr);
            return numArr.reduce((acc, cur)=>acc+cur);
        }
        //计算每个商品金额
        function getAmount(numArr,priceArr){
            return numArr.map((num,index)=>num*priceArr[index]);
        }
        //总金额
        function getTotalAmount(amountArr){
            amountArr=goodStatus(amountArr);
            return amountArr.reduce((acc,cur)=>acc+cur);
        }
        //自动计算
        function autoCalculate() {
            //数量数组
            const numArr=[...nums].map((num)=>parseInt(num.value));
            //单价数组
            const prices=document.querySelectorAll('.price');
            const pricesArr=[...prices].map((price)=>parseInt(price.textContent));
            //金额数组
            const amountArr =getAmount(numArr,pricesArr);
            document.querySelector('.total-num').textContent = getTotalNum(numArr);
        document.querySelector('.total-amount').textContent =
          getTotalAmount(amountArr);
        //为每个商品填充金额
        document
          .querySelectorAll('.amount')
          .forEach((amount, index) => (amount.textContent = amountArr[index]));
      }
      //自动加载
      window.onload = autoCalculate();
      //数量变化自动计算
      [...nums].forEach((num) => (num.onchange = autoCalculate));
    </script>
</body>
</html>
购物车实例演示

代码：

效果：
