PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > JS 购物车全选与自动结算-未选中不计算

JS 购物车全选与自动结算-未选中不计算

Jerry
Jerry 原创
2021年01月16日 22:32:41 2105浏览

1. 购物车选中与全选

首先 我们建立一个购物车样式,如下图

购物车

实现功能:1. 选中全选按钮,下面产品全部选中,2 下面任意一个产品未选中则全选按钮自动取消选中

JS 代码如下:

  1. <script>
  2. // 1. 获取全选复选框,所有独立商品的复选框
  3. const checkAll = document.querySelector("#check-all");
  4. const checkItems = document.getElementsByName("item");
  5. // 2. 为全选复选框添加事件: change,当值改变会触发
  6. // console.log(ev.target.checked); // 看当前全选的状态
  7. checkAll.onchange = (ev) =>
  8. checkItems.forEach((item) => (item.checked = ev.target.checked));
  9. // 3. 为每个单独的商品复选框添加change
  10. checkItems.forEach(
  11. (item) =>
  12. (item.onchange = () =>
  13. (checkAll.checked = [...checkItems].every((item) => item.checked)))
  14. );
  15. </script>

2. 购物车自动计算

实现功能:1. 自动计算每组商品合计金额 2 未选中不计算总额和总数量。

思路:获取每组产品的选中状态 选中为 1 未选中为 0 然后与单价和数量相乘即可。

实现如下图:
自动计算

JS 代码如下,用到的一些常亮和变量上文已获取:

  1. <script>
  2. // 用户更新数量时触发自动计算
  3. checkItems.forEach((input) => (onchange = autoCalculate));
  4. // 购物车刚加载完成时也应该触发自动计算
  5. window.onload = autoCalculate;
  6. // 封装成一个函数
  7. function autoCalculate() {
  8. // 获取单价组成的数组
  9. const prices = document.querySelectorAll("tbody .price");
  10. const priceArr = [...prices].map((item) => item.textContent * 1);
  11. console.log(priceArr);
  12. // 获取数量组成的数组,未检查是否选中之前
  13. const numbers = document.querySelectorAll("tbody input[type=number]");
  14. const numArr = [...numbers].map((item) => item.value * 1);
  15. console.log(numArr);
  16. //获取商品选中状态数组,选中1,未选中0 三元函数:
  17. const checkStatus = [];
  18. checkItems.forEach((item, index) => {
  19. item.checked ? (checkStatus[index] = 1) : (checkStatus[index] = 0);
  20. });
  21. console.log(checkStatus);
  22. //乘以选中状态后 获取新的数量数组
  23. const numArrChecked = numArr.map(
  24. (item, index) => item * checkStatus[index]
  25. );
  26. console.log(numArrChecked);
  27. // 计算商品总数
  28. let sum = numArrChecked.reduce((pre, cur) => pre + cur);
  29. console.log(sum);
  30. // 计算每件商品金额, 单价 * 数量
  31. const amountArr = priceArr.map((item, index) => item * numArr[index]);
  32. console.log(amountArr);
  33. // 计算选中商品商品金额, 单价 * 数量
  34. const amountArrChecked = priceArr.map(
  35. (item, index) => item * numArrChecked[index]
  36. );
  37. console.log(amountArrChecked);
  38. // 计算总金额 未选中不计算
  39. let totalAmount = amountArrChecked.reduce((pre, cur) => pre + cur);
  40. console.log(totalAmount);
  41. // 将计算结果渲染到购物车中
  42. // 总数量
  43. document.querySelector("#sum").textContent = sum;
  44. // 总金额
  45. document.querySelector("#total-amount").textContent = totalAmount;
  46. // 每个商品的金额
  47. document
  48. .querySelectorAll(".amount")
  49. .forEach((item, index) => (item.textContent = amountArr[index]));
  50. }
  51. </script>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议