Community Learn Tools Library Leisure
search
English
Home > List of blog posts > js之购物车自动计算
Blogger Information
Blog 41
fans 2
comment 0
visits 29335
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
js之购物车自动计算
月光下，遗忘黑暗
Original
535 people have browsed it

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>购物车全选</title>
  6.     <link rel="stylesheet" href="0412/style.css">
  7. </head>
  8. <body>
  9. <table>
  10.     <caption>
  11.         购物车
  12.     </caption>
  13.     <thead>
  14.     <tr>
  15.         <!-- 全选复选框 -->
  16.         <th><input type="checkbox" name="checkAll" id="check-all" checked /><label for="check-all">全选</label></th>
  17.         <th>图片</th>
  18.         <th>品名</th>
  19.         <th>单位</th>
  20.         <th>单价/元</th>
  21.         <th>数量</th>
  22.         <th>金额/元</th>
  23.     </tr>
  24.     </thead>
  25.     <tbody>
  26.     <tr>
  27.         <td>
  28.             <input type="checkbox" name="item" value="SN-1020" checked />
  29.         </td>
  30.         <td>
  31.             <a href=""><img src="images/p1.jpg" alt="" /></a>
  32.         </td>
  33.         <td>iPhone 11</td>
  34.         <td>台</td>
  35.         <td class="price">4799</td>
  36.         <td><input type="number" min="1" value="1" /></td>
  37.         <td class="amount">4799</td>
  38.     </tr>
  39.     <tr>
  40.         <td>
  41.             <input type="checkbox" name="item" value="SN-1020" checked />
  42.         </td>
  43.         <td>
  44.             <a href=""><img src="images/p2.jpg" alt="" /></a>
  45.         </td>
  46.         <td>小米pro 11</td>
  47.         <td>部</td>
  48.         <td class="price">3999</td>
  49.         <td><input type="number" min="1" value="2" /></td>
  50.         <td class="amount">7998</td>
  51.     </tr>
  52.     <tr>
  53.         <td>
  54.             <input type="checkbox" name="item" value="SN-1030" checked />
  55.         </td>
  56.         <td>
  57.             <a href=""><img src="images/p3.jpg" alt="" /></a>
  58.         </td>
  59.         <td>MacBook Pro</td>
  60.         <td>台</td>
  61.         <td class="price">18999</td>
  62.         <td><input type="number" min="1" value="1" /></td>
  63.         <td class="amount">18999</td>
  64.     </tr>
  65.     <tr>
  66.         <td>
  67.             <input type="checkbox" name="item" value="SN-1040" checked />
  68.         </td>
  69.         <td>
  70.             <a href=""><img src="images/p4.jpg" alt="" /></a>
  71.         </td>
  72.         <td>小米75电视</td>
  73.         <td>台</td>
  74.         <td class="price">5999</td>
  75.         <td><input type="number" min="1" value="2" /></td>
  76.         <td class="amount">11998</td>
  77.     </tr>
  78.     <tr>
  79.         <td>
  80.             <input type="checkbox" name="item" value="SN-1050" checked />
  81.         </td>
  82.         <td>
  83.             <a href=""><img src="images/p5.jpg" alt="" /></a>
  84.         </td>
  85.         <td>Canon 90D单反</td>
  86.         <td>台</td>
  87.         <td class="price">9699</td>
  88.         <td><input type="number" min="1" value="1" /></td>
  89.         <td class="amount">9699</td>
  90.     </tr>
  91.     </tbody>
  92.     <tfoot>
  93.     <tr style="font-weight: bolder; font-size: 1.2em">
  94.         <td colspan="5">总计:</td>
  95.         <td id="sum">7</td>
  96.         <td id="total-amount">53493</td>
  97.     </tr>
  98.     </tfoot>
  99. </table>
  100. <div style="width: 90%; margin: 10px auto">
  101.     <button style="float: right; width: 100px">结算</button>
  102. </div>
  103. <script>
  104.     // Array.every(callback) 每个成员回调处理后全部为true，返回结果为true
  105.     //Array.some(callback) 只要有一个结果是true，返回结果就为true
  106.     // console.log([4,5,6].every((item) => item>1))
  107.     // console.log([4,5,6].some((item) => item>=6))
  108.     const checkAll = document.querySelector('#check-all');
  109.     const checkItems = document.getElementsByName("item");
  110.     let checkStatus =[];
  111.     // 为全选按钮添加效果
  112.     checkAll.onchange = (ev) => checkItems.forEach((item) => {
  113.         item.checked = ev.target.checked;
  114.     });
  115.     //3.为每个单独的商品复选框添加change事件
  116.     checkItems.forEach(item => {
  117.         item.onchange=()=>{
  118.         autoCalculate();
  119.         checkAll.checked =  [...checkItems].every(item=>item.checked)
  120.         }
  121.     }
  122.     )
  125.     //自动计算
  126.     const numInput = document.querySelectorAll('tbody input[type="number"]');
  127.     //用户更新数量时自动计算
  128.     numInput.forEach(input=> (onchange=autoCalculate));
  129.     //自动计算函数
  130.     function autoCalculate() {
  131.         //单价数组
  132.         const prices = document.querySelectorAll('tbody .price');
  133.         //forEach()没有返回值，这里用一个和它一样功能的有返回值的方法：map（）
  134.         const priceArr = [...prices].map(price => price.textContent * 1);
  136.         //数量数组
  137.         const numbers = document.querySelectorAll('tbody input[type=number]');
  138.        // 每次进来复选框按钮进行重置
  139.         checkStatus = [];
  140.         // 得到复选框的状态数组
  141.         checkItems.forEach(item => {
  142.                checkStatus.push(item.checked)
  143.             }
  144.         )
  145.         const numArr = [...numbers].map((num,index) => {
  146.             if (checkStatus[index] == true) {
  147.                 return num.value * 1
  148.             }else {
  149.                 return false;
  150.             }
  151.         }
  152.             );
  153.         //金额 数量*单价
  154.         let sum = numArr.reduce((pre,cur) => pre+cur);
  155.         const amountArr =   [priceArr,numArr].reduce((total,curr) => total.map((item,index)=>item*curr[index]));
  156.         // 将计算结果渲染到页面中
  157.         document.querySelector("#sum").textContent = String(sum);
  158.         document.querySelector('#total-amount').textContent = amountArr.reduce((pre,cur)=>pre+cur);
  159.         //渲染每个商品的金额
  160.         document.querySelectorAll('.amount').forEach((item,index) => item.textContent = amountArr[index]);
  162.         //页面加载后自动计算
  163.         window.onload = autoCalculate;
  164.     }
  171. </script>
  172. </body>
  173. </html>

效果

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