代码块
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>购物车全选</title> <link rel="stylesheet" href="0412/style.css"></head><body><table> <caption> 购物车 </caption> <thead> <tr> <!-- 全选复选框 --> <th><input type="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">4799</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">7998</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">18999</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">11998</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">9699</td> </tr> </tbody> <tfoot> <tr style="font-weight: bolder; font-size: 1.2em"> <td colspan="5">总计:</td> <td id="sum">7</td> <td id="total-amount">53493</td> </tr> </tfoot></table><div style="width: 90%; margin: 10px auto"> <button style="float: right; width: 100px">结算</button></div><script> // Array.every(callback) 每个成员回调处理后全部为true，返回结果为true //Array.some(callback) 只要有一个结果是true，返回结果就为true // console.log([4,5,6].every((item) => item>1)) // console.log([4,5,6].some((item) => item>=6)) const checkAll = document.querySelector('#check-all'); const checkItems = document.getElementsByName("item"); let checkStatus =[]; // 为全选按钮添加效果 checkAll.onchange = (ev) => checkItems.forEach((item) => { item.checked = ev.target.checked; }); //3.为每个单独的商品复选框添加change事件 checkItems.forEach(item => { item.onchange=()=>{ autoCalculate(); checkAll.checked = [...checkItems].every(item=>item.checked) } } ) //自动计算 const numInput = document.querySelectorAll('tbody input[type="number"]'); //用户更新数量时自动计算 numInput.forEach(input=> (onchange=autoCalculate)); //自动计算函数 function autoCalculate() { //单价数组 const prices = document.querySelectorAll('tbody .price'); //forEach()没有返回值，这里用一个和它一样功能的有返回值的方法：map（） const priceArr = [...prices].map(price => price.textContent * 1); //数量数组 const numbers = document.querySelectorAll('tbody input[type=number]'); // 每次进来复选框按钮进行重置 checkStatus = []; // 得到复选框的状态数组 checkItems.forEach(item => { checkStatus.push(item.checked) } ) const numArr = [...numbers].map((num,index) => { if (checkStatus[index] == true) { return num.value * 1 }else { return false; } } ); //金额 数量*单价 let sum = numArr.reduce((pre,cur) => pre+cur); const amountArr = [priceArr,numArr].reduce((total,curr) => total.map((item,index)=>item*curr[index])); // 将计算结果渲染到页面中 document.querySelector("#sum").textContent = String(sum); document.querySelector('#total-amount').textContent = amountArr.reduce((pre,cur)=>pre+cur); //渲染每个商品的金额 document.querySelectorAll('.amount').forEach((item,index) => item.textContent = amountArr[index]); //页面加载后自动计算 window.onload = autoCalculate; }</script></body></html>
效果
