收藏
PHPz批改状态：合格
老师批语：
<!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>购物车-2</title><link rel="stylesheet" href="css/demo3.css"></head><body><div class="box"><!-- 全选框 --><div class="selectAll"><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">2000</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">1500</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>//全选function checkAll() {let status=event.target.checked;console.log(status);//子商品状态document.querySelectorAll(".list li input[type='checkbox']").forEach((item)=>(item.checked=status));autoCalculate();}function checkItems() {//全部商品let items = document.querySelectorAll(".list li input[type='checkbox']");//判断状态let status=[...items].every((item)=>item.checked===true);console.log(status);document.querySelector('.check-all').checked=status;autoCalculate();}const nums=document.querySelectorAll('.num');// console.log(nums);//商品是否被选中function goodStatus(numArr){let items =document.querySelectorAll(".list li input[type='checkbox']");return numArr.map((num,index)=>{if (items[index].checked===false){return (num=0);} else {return num;}});}//计算总数量function getTotalNum(numArr) {numArr=goodStatus(numArr);return numArr.reduce((acc, cur)=>acc+cur);}//计算每个商品金额function getAmount(numArr,priceArr){return numArr.map((num,index)=>num*priceArr[index]);}//总金额function getTotalAmount(amountArr){amountArr=goodStatus(amountArr);return amountArr.reduce((acc,cur)=>acc+cur);}//自动计算function autoCalculate() {//数量数组const numArr=[...nums].map((num)=>parseInt(num.value));//单价数组const prices=document.querySelectorAll('.price');const pricesArr=[...prices].map((price)=>parseInt(price.textContent));//金额数组const amountArr =getAmount(numArr,pricesArr);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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
