简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > JavaScript学习之购物车全选、自动计算
Blogger Information
Blog 40
fans 0
comment 1
visits 34274
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JavaScript学习之购物车全选、自动计算
景云
Original
807 people have browsed it

功能示例图

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. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！