![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：
Collection
Collection
在选中框的onchange事件中调用自动计算函数
<!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">结算</button></div><script>// 1.全选函数function checkAll() {// 1.全选按钮状态let status = event.target.checked;// 2.根据状态动态设定所有商品的状态let items=document.querySelectorAll('.list li input[type="checkbox"]');items.forEach(item=>(item.checked=status));autoCalculate();}// 2.根据用户选择来动态设置全选状态function checkItems() {// 1.拿到全部商品let items=document.querySelectorAll('.list li input[type="checkbox"]');// 2.判断状态，只有全部被选择，才需要设置全选框为truelet status=[...items].every(item=>item.checked===true);// 3.将这个新状态设置到全选按钮document.querySelector('.check-all').checked=status;autoCalculate();}// 3.商品自动计算// 所有计算都是基于商品数量变const nums=document.querySelectorAll('.num');const checks=document.querySelectorAll('.list li input[type="checkbox"]');console.log(checks);// 3.1 计算总数量function getTotalNum(numArr) {return numArr.reduce((acc,cur)=>acc+cur);}// 3.2计算每个商品的金额function getAmount(numArr, priceArr) {//金额=数量*单价return numArr.map((num,index)=>num*priceArr[index]);}// 3.3计算总金额function getTotalAmount(amountArr) {return amountArr.reduce((acc,cur)=>acc+cur);}// 3.4自动计算function autoCalculate() {// 商品数量数组// const numArr=[...nums].map(num=>parseInt(num.value));// 如果没选中数量为0const numArr=[...nums].map((num,index)=>checks[index].checked?parseInt(num.value):0);// 单价数组const prices=document.querySelectorAll('.price');const priceArr = [...prices].map(price=>parseFloat(price.textContent));// console.log(priceArr);// 金额数组const amountArr=getAmount(numArr,priceArr);// console.log(amountArr);//总数量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>
