search

博客列表 >JavaScript学习之购物车全选、自动计算

JavaScript学习之购物车全选、自动计算

景云
景云原创
2021年03月22日 16:19:40812浏览

功能示例图

1.商品的全选与取消全选

1.1 点击全选时，每个商品选择框全部激活；反之全部取消。
1.2 点击单个商品选择框时，会判断所所有商品选择框是否全部激活，全部激活则全选框激活，只要有一个选择框未激活，则全选框不激活。

2. 商品金额的计算

2.1 每个商品根据数量和单价计算单个商品总额，渲染到页面中

3.根据商品选择框是否激活，计算已激活的所以商品的数量和金额，渲染到页面中

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>购物车全选与自动计算</title>
  9.   <link rel="stylesheet" href="./style.css">
  10.   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  11. </head>
  13. <body>
  15.   <table>
  16.     <caption>
  17.       购物车
  18.     </caption>
  19.     <thead>
  20.       <tr>
  21.         <!-- 全选复选框 -->
  22.         <th><input type="checkbox" name="checkAll" id="check-all" /><label for="check-all">全选</label></th>
  23.         <th>图片</th>
  24.         <th>品名</th>
  25.         <th>单位</th>
  26.         <th>单价/元</th>
  27.         <th>数量</th>
  28.         <th>金额/元</th>
  29.       </tr>
  30.     </thead>
  31.     <tbody>
  32.       <tr>
  33.         <td>
  34.           <input type="checkbox" name="item" value="SN-1020" checked />
  35.         </td>
  36.         <td>
  37.           <a href=""><img src="images/1.gif" alt="" /></a>
  38.         </td>
  39.         <td>iPhone 11</td>
  40.         <td>台</td>
  41.         <td class="price">1</td>
  42.         <td><input type="number" min="1" value="1" /></td>
  43.         <td class="amount">xxx</td>
  44.       </tr>
  45.       <tr>
  46.         <td>
  47.           <input type="checkbox" name="item" value="SN-1020" checked />
  48.         </td>
  49.         <td>
  50.           <a href=""><img src="images/1.gif" alt="" /></a>
  51.         </td>
  52.         <td>小米pro 11</td>
  53.         <td>部</td>
  54.         <td class="price">2</td>
  55.         <td><input type="number" min="1" value="2" /></td>
  56.         <td class="amount">xxx</td>
  57.       </tr>
  58.       <tr>
  59.         <td>
  60.           <input type="checkbox" name="item" value="SN-1030" />
  61.         </td>
  62.         <td>
  63.           <a href=""><img src="images/1.gif" alt="" /></a>
  64.         </td>
  65.         <td>MacBook Pro</td>
  66.         <td>台</td>
  67.         <td class="price">3</td>
  68.         <td><input type="number" min="1" value="1" /></td>
  69.         <td class="amount">xxx</td>
  70.       </tr>
  71.       <tr>
  72.         <td>
  73.           <input type="checkbox" name="item" value="SN-1040" checked />
  74.         </td>
  75.         <td>
  76.           <a href=""><img src="images/1.gif" alt="" /></a>
  77.         </td>
  78.         <td>小米75电视</td>
  79.         <td>台</td>
  80.         <td class="price">4</td>
  81.         <td><input type="number" min="1" value="2" /></td>
  82.         <td class="amount">xxx</td>
  83.       </tr>
  84.       <tr>
  85.         <td>
  86.           <input type="checkbox" name="item" value="SN-1050" checked />
  87.         </td>
  88.         <td>
  89.           <a href=""><img src="images/1.gif" alt="" /></a>
  90.         </td>
  91.         <td>Canon 90D单反</td>
  92.         <td>台</td>
  93.         <td class="price">5</td>
  94.         <td><input type="number" min="1" value="1" /></td>
  95.         <td class="amount">xxx</td>
  96.       </tr>
  97.     </tbody>
  98.     <tfoot>
  99.       <tr style="font-weight: bolder; font-size: 1.2em">
  100.         <td colspan="5">总计:</td>
  101.         <td id="sum">xxx</td>
  102.         <td id="total-amount">xxx</td>
  103.       </tr>
  104.     </tfoot>
  105.   </table>
  106.   <div style="width: 90%; margin: 10px auto">
  107.     <button style="float: right; width: 100px">结算</button>
  108.   </div>
  110.   <script>
  111.     //1.获取全选和所有独立商品复选框
  112.     const checkAll = document.querySelector("#check-all");
  113.     const checkItems = document.getElementsByName("item");
  114.     // 为全选框添加事件：change（当值发生变化时会触发）
  115.     checkAll.onchange = function (ev) {
  116.       checkItems.forEach(function (item) {
  117.         item.checked = ev.target.checked;
  118.       })
  119.       //全选框取消或激活时需要触发自动计算
  120.       autoCalculate();
  121.     }
  122.     // 为每个单独的商品选择框添加change事件（每个商品都选择时，全选框被激活，否则取消）
  123.     checkItems.forEach(function (item) {
  124.       item.onchange = function () {
  125.         // Array.every(callback)：对数组中每个成员进行回调处理，只有全部为true，最终才返回true，只要有一个返回false最终也会返回false，类似“逻辑与 and”；some()相反。
  126.         checkAll.checked = [...checkItems].every(item => item.checked);
  127.         //每次选中或取消单个商品选择框时需要触发自动计算
  128.         autoCalculate();
  129.       }
  130.     })
  132.     // 获取所以的数量控件
  133.     const numInput = document.querySelectorAll("tbody input[type=number]");
  134.     // 用户更新数量时自动触发自动计算
  135.     numInput.forEach(function (input) {
  136.       input.onchange = autoCalculate;
  137.     })
  138.     // 购物车刚加载完也要触发自动计算
  139.     window.onload = autoCalculate;
  142.     // 封装一个计算金额的函数
  143.     function autoCalculate() {
  144.       // 获取单价组成的数组
  145.       const prices = document.querySelectorAll("tbody .price");
  146.       const priceArr = [...prices].map(function (item) {
  147.         return item.textContent * 1;//结果为字符串，乘以1后会执行自动转换，转换成数字
  148.       })
  149.       // 获取数量组成的数组
  150.       const numbers = document.querySelectorAll("tbody input[type=number]");
  151.       const numberArr = [...numbers].map(function (item) {
  152.         return item.value * 1;//结果为字符串，乘以1后会执行自动转换，转换成数字
  153.       })
  155.       //计算每件商品金额，单价*数量
  156.       // 将金额数组和数量数组作为一个新的数组，reduce（）将会对其内的两个数组都进行处理; total为最终返回值，curr为当前被操作的数组
  157.       const amountArr = [priceArr, numberArr].reduce(function (total, curr) {
  158.         return total.map(function (item, index) {
  159.           return item * curr[index];
  160.         })
  161.       })
  163.       //获取选中的商品数量的数组
  164.       let checkNumberArr = [];
  165.       [...numbers].map(function (item, index) {
  166.         // 如果当前商品选中，将商品数量取出
  167.         if (checkItems[index].checked) {
  168.           checkNumberArr[index] = item.value * 1;
  169.         }
  170.       })
  171.       //获取选中的商品价格的数组  
  172.       let checkPriceArr = [];
  173.       [...prices].map(function (item, index) {
  174.         // 如果当前商品选中，将商品数量取出
  175.         if (checkItems[index].checked) {
  176.           checkPriceArr[index] = item.textContent * 1;
  177.         }
  178.       })
  179.       //计算每件选中商品的金额
  180.       const amountCheckedArr = [checkPriceArr, checkNumberArr].reduce(function (total, curr) {
  181.         return total.map(function (item, index) {
  182.           return item * curr[index];
  183.         })
  184.       })
  185.       //选中商品总数
  186.       let sum = 0;
  187.       if (checkNumberArr.length > 0) {
  188.         sum = checkNumberArr.reduce(function (pre, cur) {
  189.           return pre + cur;
  190.         })
  191.       }
  193.       // 计算选中商品总金额
  194.       let totalAmount = 0;
  195.       if (amountCheckedArr.length > 0) {
  196.         totalAmount = amountCheckedArr.reduce(function (pre, cur) {
  197.           return pre + cur;
  198.         });
  199.       }
  200.       // 将计算的结果渲染到购物车中
  201.       document.querySelector("#sum").textContent = sum;
  202.       // 总金额也渲染
  203.       if (totalAmount) {
  204.         document.querySelector("#total-amount").textContent = totalAmount;
  205.       } else {
  206.         document.querySelector("#total-amount").textContent = '0';
  207.       }
  208.       // 每个商品的金额也渲染
  209.       document.querySelectorAll(".amount").forEach(function (item, index) {
  210.         item.textContent = amountArr[index];
  211.       });
  212.     }
  213.   </script>
  214. </body>
  215. </html>

CSS

  1. table {
  2.   border-collapse: collapse;
  3.   width: 90%;
  4.   text-align: center;
  5.   margin: auto;
  6. }
  8. table caption {
  9.   margin-bottom: 15px;
  10.   font-size: 1.5rem;
  11. }
  13. table th,
  14. table td {
  15.   border-bottom: 1px solid #ccc;
  16.   padding: 5px;
  17.   font-weight: normal;
  18. }
  20. table thead tr:first-of-type {
  21.   background-color: #e6e6e6;
  22.   height: 3em;
  23. }
  25. table input[type="checkbox"] {
  26.   width: 1.5em;
  27.   height: 1.5em;
  28. }
  30. table tbody tr {
  31.   border-bottom: 1px solid #ccc;
  32. }
  33. table tbody tr:hover {
  34.   background-color: #f6f6f6;
  35.   cursor: pointer;
  36. }
  38. tbody img {
  39.   width: 3em;
  40. }
  41. tbody input[type="number"] {
  42.   width: 3em;
  43. }
  45. button {
  46.   width: 150px;
  47.   height: 30px;
  48.   outline: none;
  49.   border: none;
  50.   background-color: teal;
  51.   color: white;
  52.   letter-spacing: 5px;
  53. }
  54. button:hover {
  55.   opacity: 0.7;
  56.   cursor: pointer;
  57. }
上一条：地图链接.内联框架下一条：html基础：form表单
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多