以老师写的dom为基础,用js原生函数写的,后面在写jQuery
变化因子包括全选\反选,单品选中\反选,数量的改变(同时检查它自己的复选框是否被选中)
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>购物车自动计算</title><link rel="stylesheet" href="style.css" /></head><body><table><caption>购物车</caption><thead><tr><!-- 全选复选框 --><th><inputtype="checkbox"name="checkAll"id="check-all"checked/><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" checked /></td><td><a href=""><img src="images/p1.jpg" alt="" /></a></td><td>iPhone 11</td><td>台</td><td class="price">4799</td><td><input type="number" min="1" value="1" /></td><td class="amount">xxxx</td></tr><tr><td><input type="checkbox" name="item" value="SN-1020" checked /></td><td><a href=""><img src="images/p2.jpg" alt="" /></a></td><td>小米pro 11</td><td>部</td><td class="price">3999</td><td><input type="number" min="1" value="2" /></td><td class="amount">xxxx</td></tr><tr><td><input type="checkbox" name="item" value="SN-1030" checked /></td><td><a href=""><img src="images/p3.jpg" alt="" /></a></td><td>MacBook Pro</td><td>台</td><td class="price">18999</td><td><input type="number" min="1" value="1" /></td><td class="amount">xxxx</td></tr><tr><td><input type="checkbox" name="item" value="SN-1040" checked /></td><td><a href=""><img src="images/p4.jpg" alt="" /></a></td><td>小米75电视</td><td>台</td><td class="price">5999</td><td><input type="number" min="1" value="2" /></td><td class="amount">xxxx</td></tr><tr><td><input type="checkbox" name="item" value="SN-1050" checked /></td><td><a href=""><img src="images/p5.jpg" alt="" /></a></td><td>Canon 90D单反</td><td>台</td><td class="price">9699</td><td><input type="number" min="1" value="1" /></td><td class="amount">xxxx</td></tr></tbody><tfoot><tr style="font-weight: bolder; font-size: 1.2em"><td colspan="5">总计:</td><td id="sum">xxxx</td><td id="total-amount">xxxx</td></tr></tfoot></table><div style="width: 90%; margin: 10px auto"><button style="float: right; width: 100px">结算</button></div><script>// 1. 获取全选复选框,所有独立商品的复选框const checkAll = document.querySelector("#check-all");const checkItems = document.getElementsByName("item");// 2. 为全选复选框添加事件: change,当值改变会触发// console.log(ev.target.checked); // 看当前全选的状态checkAll.onchange = (ev) =>checkItems.forEach((item) => (item.checked = ev.target.checked));// 3. 为每个单独的商品复选框添加changecheckItems.forEach((item) =>(item.onchange = () => {checkAll.checked = [...checkItems].every((item) => item.checked);//autoCalculate();}));// =====================================================// 获取所有的数量控件const numInput = document.querySelectorAll('tbody input[type="number"');// // 用户更新数量时触发自动计算// numInput.forEach((input) => {// //单独onchange?// input.onchange = autoCalculate;// });// 购物车刚加载完成时也应该触发自动计算window.onload = autoCalculate;//表格change触发const myTable = document.querySelector("table");myTable.onchange = autoCalculate;// 封装一个自动计算的函数function autoCalculate() {// 获取单价组成的数组const prices = document.querySelectorAll("tbody .price");const priceArr = [...prices].map((item) => item.textContent * 1);console.log(priceArr);// 获取数量组成的数组const numbers = document.querySelectorAll("tbody input[type=number]");let numArr = [...numbers].map((item) => item.value * 1);console.log(numArr);// 计算每件商品金额, 单价 * 数量let amountArr = [priceArr, numArr].reduce((total, curr) =>total.map((item, index) => item * curr[index]));console.log(amountArr);// 每个商品的金额写到页面上document.querySelectorAll(".amount").forEach((item, index) => (item.textContent = amountArr[index]));// ---------------------------------// 商品总数// 用filter过滤出选中的商品numArr = numArr.filter((item, index) => {// console.log(checkItems[index].checked);return checkItems[index].checked;});let sum = numArr.length ? numArr.reduce((pre, cur) => pre + cur) : 0;// 计算总金额// 用filter过滤出选中的商品amountArr = amountArr.filter((item, index) => {// console.log(checkItems[index].checked);return checkItems[index].checked;});let totalAmount = amountArr.length? amountArr.reduce((pre, cur) => pre + cur): 0;console.log(totalAmount);// 将计算结果渲染到购物车中// 总数量document.querySelector("#sum").textContent = sum;// 总金额document.querySelector("#total-amount").textContent = totalAmount;}</script></body></html>