shopping-cart.html

<!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>购物车（计算选中商品）</title>
    <style>
        .box {
            width: 22em;
            height: 2em;
        }
        .list>li {
            height: 1.6em;
            background-color: #efefef;
            display: grid;
            grid-template-columns: repeat(5, 3em);
            gap: 1em;
            place-items: center right;
            border-bottom: 1px solid #ccc;
        }
        .list>li:first-of-type {
            background-color: lightseagreen;
            color: white;
        }
        .list>li:hover:not(:first-of-type) {
            cursor: pointer;
            background-color: lightcyan;
        }
        .list>li input[type='number'] {
            width: 3em;
            border: none;
            outline: none;
            text-align: center;
            font-size: 1em;
            background-color: transparent;
        }
        .list>li:last-of-type span.total-num,
        .list>li:last-of-type span.total-amount {
            grid-column: span 2;
            place-self: center right;
            color: lightseagreen;
        }
        .account {
            float: right;
            background-color: lightseagreen;
            color: white;
            border: none;
            outline: none;
            width: 4.5em;
            height: 1.8em;
        }
        .account:hover {
            background-color: coral;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="selectAll">
            <!-- checkAll(): 当全选按钮的状态发生变化化,触发该事件 change  -->
            <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">200</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">300</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" onclick="autoCalculate()">结算</button>
    </div>
    <script>
        function checkAll(){
            let status = event.target.checked;   
            let items = document.querySelectorAll('.list li input[type="checkbox"]');
            items.forEach(item => (item.checked = status));
        }
        function checkItems(){
            let items = document.querySelectorAll('.list li input[type="checkbox"]');
            let status = [...items].every(item => item.checked === true); 
            document.querySelector('.check-all').checked = status;
        }
            // 商品自动计算
            // 所有计算都是基于选中商品数量的变化
            const nums = document.querySelectorAll('.num');
            // 1. 计算总数量
            function getTotalNum(numArr) {
                return numArr.reduce((acc, cur) => acc + cur);
            }
            // 2. 计算每个商品的金额
            function getAmount(numArr, priceArr) {
                // 金额 = 数量 * 单价
                return numArr.map((num, index) => num * priceArr[index]);
            }
            // console.log(getAmount([1, 2, 3], [100, 200, 300]));
            // 3. 计算总金额
            function getTotalAmount(amountArr) {
                return amountArr.reduce((acc, cur) => acc + cur);
            }
            // 4. 自动计算
            function autoCalculate() {
                // 选中商品数量数组（以父节点li的第一个子元素input的checked属性判断商品是否选中）
                const numArr = [...nums].filter(item => item.parentNode.firstElementChild.checked === true).map(num => parseInt(num.value));
                console.log(numArr);
                // 选中单价数组
                const prices = document.querySelectorAll('.price');
                const priceArr = [...prices].filter(item => item.parentNode.firstElementChild.checked === true).map(price => parseInt(price.textContent));
                console.log(priceArr);
                // 选中金额数组
                const amountArr = getAmount(numArr, priceArr);
                console.log(amountArr);
                // 选中商品总数量
                console.log(getTotalNum(numArr));
                document.querySelector('.total-num').textContent = getTotalNum(numArr);
                // 选中商品总金额
                document.querySelector('.total-amount').textContent = getTotalAmount(amountArr);
                // 为选中的商品填充金额,未选购的商品备注
                const amount = document.querySelectorAll('.amount');
                amount.forEach((amount, index) => (amount.textContent = "未选购"));
                [...amount].filter(item => item.parentNode.firstElementChild.checked === true).forEach((amount, index) => (amount.textContent = amountArr[index]));
            }
            // 当页面加载的时候自动计算
           // window.onload = autoCalculate;
            // 当数量更新时,自动计算所有数据
            nums.forEach(num => (num.onchange = autoCalculate));
    </script>
</body>
</html>