使用jQuery实现购物车全选/全不操作、 选中与不选中商品购物车都会自动计算
程序员文章站
2022-02-17 11:28:28
...
使用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><!-- 导入外部css代码 --><link rel="stylesheet" href="style.css" /><!-- 引入jQuery库 --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script></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></body></html>
当前默认效果预览:
往body中添加srcipt样式代码:
<script>// 使用jQuery完成购物车全选/全不选操作//先让checkbox全部选中$("#check-all").change(function () {$(":checkbox[name='item']").prop("checked", this.checked);});// 全选状态下,用户取消单个选中框,全选会自动取消$(":checkbox[name='item']").change((ev) =>$("#check-all").prop("checked", ev.target.checked));</script>
效果预览:
选中与不选都能自动计算:
在前面购物车列表body中添加样式代码:
<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))));// 获取所有的数量控件const numInput = document.querySelectorAll('tbody input[type="number"');// 用户更新数量时触发自动计算numInput.forEach((input) => (onchange = autoCalculate));// 购物车刚加载完成时也应该触发自动计算window.onload = 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]");const numArr = [...numbers].map((item) => item.value * 1);console.log(numArr);//获取被商品选中状态数组,如果选中了,就是1,没选就是0:let unCheckItems = [];checkItems.forEach((item) => unCheckItems.push(item.checked));for (i = 0; i < unCheckItems.length; i++) {if (unCheckItems[i] === false) {unCheckItems[i] = 0;} else {unCheckItems[i] = 1;}console.log(unCheckItems);}//被选中的商品的数量数组 这个数组用来装选中商品的数量let checkedNumbers = [];let sum = 0;for (n = 0; n < numArr.length; n++) {checkedNumbers.push(numArr[n] * unCheckItems[n]);}console.log(checkedNumbers);//那么就得出被选中的商品总量应该是：sum = checkedNumbers.reduce((pre, cur) => pre + cur);console.log(sum);// 计算每件商品金额, 单价 * 数量let amountArr = [];for (i = 0; i < priceArr.length; i++) {amountArr.push(priceArr[i] * numArr[i]);}console.log(amountArr);let totalAmount = 0;// 被选中的商品的价格的数组let checkedPrice = [];for (g = 0; g < amountArr.length; g++) {checkedPrice.push(amountArr[g] * unCheckItems[g]);}console.log(checkedPrice);//那么所有被选中的商品的总价应当是：totalAmount = checkedPrice.reduce((pre, cur) => pre + cur);console.log(totalAmount);// 将计算结果渲染到购物车中// 被选中商品的总数量document.querySelector("#sum").textContent = sum;// 被选中商品的总金额document.querySelector("#total-amount").textContent = totalAmount;// 每个商品的金额document.querySelectorAll(".amount").forEach((item, index) => (item.textContent = amountArr[index]));}</script>