0412作业-购物车

实现:
1.全选,单选商品时价格数量计算
2.数量变化时自动选择商品及价格数量计算

• css

table {
  border-collapse: collapse;
  width: 90%;
  text-align: center;
  margin: auto;
}
table caption {
  margin-bottom: 15px;
  font-size: 1.5rem;
}
table th,
table td {
  border-bottom: 1px solid #ccc;
  padding: 5px;
  font-weight: normal;
}
table thead tr:first-of-type {
  background-color: #e6e6e6;
  height: 3em;
}
table input[type="checkbox"] {
  width: 1.5em;
  height: 1.5em;
}
table tbody tr {
  border-bottom: 1px solid #ccc;
}
table tbody tr:hover {
  background-color: #f6f6f6;
  cursor: pointer;
}
tbody img {
  width: 3em;
}
tbody input[type="number"] {
  width: 3em;
}
button {
  width: 150px;
  height: 30px;
  outline: none;
  border: none;
  background-color: teal;
  color: white;
  letter-spacing: 5px;
}
button:hover {
  opacity: 0.7;
  cursor: pointer;
}

• html

    <table>
        <caption>
            购物车
        </caption>
        <thead>
            <tr>
                <!-- 全选复选框 -->
                <th><input type="checkbox" name="checkAll" id="check-all" /><label for="check-all">全选</label>
                </th>
                <th>图片</th>
                <th>品名</th>
                <th>单位</th>
                <th>单价/元</th>
                <th>数量</th>
                <th>金额/元</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" name="item" value="SN-1020" />
                </td>
                <td>
                    <a href=""><img src="images/p1.jpg" alt="" /></a>
                </td>
                <td>iPhone 11</td>
                <td>台</td>
                <td>4799</td>
                <td><input type="number" min="1" value="1" /></td>
                <td class="amount">0</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="item" value="SN-1020" />
                </td>
                <td>
                    <a href=""><img src="images/p2.jpg" alt="" /></a>
                </td>
                <td>小米pro 11</td>
                <td>部</td>
                <td>3999</td>
                <td><input type="number" min="1" value="2" /></td>
                <td class="amount">0</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="item" value="SN-1030" />
                </td>
                <td>
                    <a href=""><img src="images/p3.jpg" alt="" /></a>
                </td>
                <td>MacBook Pro</td>
                <td>台</td>
                <td>18999</td>
                <td><input type="number" min="1" value="1" /></td>
                <td class="amount">0</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="item" value="SN-1040" />
                </td>
                <td>
                    <a href=""><img src="images/p4.jpg" alt="" /></a>
                </td>
                <td>小米75电视</td>
                <td>台</td>
                <td>5999</td>
                <td><input type="number" min="1" value="2" /></td>
                <td class="amount">0</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="item" value="SN-1050" />
                </td>
                <td>
                    <a href=""><img src="images/p5.jpg" alt="" /></a>
                </td>
                <td>Canon 90D单反</td>
                <td>台</td>
                <td>9699</td>
                <td><input type="number" min="1" value="1" /></td>
                <td class="amount">0</td>
            </tr>
        </tbody>
        <tfoot>
            <tr style="font-weight: bolder; font-size: 1.2em">
                <td colspan="5">已选总计:</td>
                <td id="sum">0</td>
                <td id="total-amount">0</td>
            </tr>
        </tfoot>
    </table>
    <div style="width: 90%; margin: 10px auto">
        <button style="float: right; width: 100px">结算</button>
    </div>

• js

    // 全选ele
    const checkAll = document.querySelector('#check-all');
    // 单选商品ele
    const checkItems = document.querySelectorAll('input[name="item"]');
    // 单商品价格ele
    const price = document.querySelectorAll('tr > td:nth-of-type(5)');
    // 单商品个数ele
    const itemNum = document.querySelectorAll('input[type="number"]');
    // 单商品总价ele
    const itemAmount = document.querySelectorAll('.amount');
    // 全总价ele
    const totalAmount = document.querySelector('#total-amount');
    // 全商品总数ele
    const itemTotal = document.querySelector('#sum');
    // 定义数组相乘函数
    function resum(arr1, arr2) {
        return [arr1, arr2].reduce((pre, cur) => pre.map((item, index) => item * cur[index]));
    }
    // 所有变化函数
    function allChange() {
        // 商品是否选择数组
        let checkArr = [...checkItems].map((item) => item.checked * 1);
        // 商品数量数组
        let numberArr = [...itemNum].map((item) => item.value * 1);
        // 商品价格数组
        let priceArr = [...price].map((item) => item.textContent * 1);
        // 单商品总价数组
        let itemAmountArr = resum(priceArr, numberArr);
        // 单商品总价写入ele
        itemAmount.forEach((item, index) => item.textContent = itemAmountArr[index]);
        // 选定商品总数写入ele
        itemTotal.textContent = resum(numberArr, checkArr).reduce((pre, cur) => pre + cur);
        // 选定商品总价写入ele
        totalAmount.textContent = resum(itemAmountArr, checkArr).reduce((pre, cur) => pre + cur);
    }
    // 全选事件
    checkAll.onchange = ((ev) => {
        checkItems.forEach((item) => { item.checked = checkAll.checked });
        allChange();
    });
    // 单选事件
    checkItems.forEach((item) => {
        item.onchange = (ev) => {
            checkAll.checked = [...checkItems].every((item) => item.checked);
            allChange();
        }
    })
    // 数量变化事件
    itemNum.forEach((item, index) => {
        item.onchange = (ev) => {
            // 自动选择
            checkItems[index].checked = true;
            allChange();
        };
    })
    // 加载时
    window.onload = (() => allChange());