Community Learn Tools Library Leisure
search
English
Home > List of blog posts > jQuery完成购物车全选/不全选、实现勾选/不勾选商品时购物车自动完成计算
Blogger Information
Blog 47
fans 3
comment 0
visits 38248
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
jQuery完成购物车全选/不全选、实现勾选/不勾选商品时购物车自动完成计算
吳
Original
1395 people have browsed it

1.jQuery完成购物车全选/不全选

  1. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>jquery购物车全选与不全选</title>
  7.     </title>
  8.     <link rel="stylesheet" href="style.css" />
  9.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  10. </head>
  12. <body>
  13.     <table>
  14.         <caption>
  15.             购物车
  16.         </caption>
  17.         <thead>
  18.             <tr>
  19.                 <!-- 全选复选框 -->
  20.                 <th><input type="checkbox" name="checkAll" id="check-all" checked /><label for="check-all">全选</label>
  21.                 </th>
  22.                 <th>图片</th>
  23.                 <th>品名</th>
  24.                 <th>单位</th>
  25.                 <th>单价/元</th>
  26.                 <th>数量</th>
  27.                 <th>金额/元</th>
  28.             </tr>
  29.         </thead>
  30.         <tbody>
  31.             <tr>
  32.                 <td>
  33.                     <input type="checkbox" name="item" value="SN-1020" checked />
  34.                 </td>
  35.                 <td>
  36.                     <a href=""><img src="images/p1.jpg" alt="" /></a>
  37.                 </td>
  38.                 <td>iPhone 11</td>
  39.                 <td>台</td>
  40.                 <td class="price">4799</td>
  41.                 <td><input type="number" min="1" value="1" /></td>
  42.                 <td class="amount">xxxx</td>
  43.             </tr>
  44.             <tr>
  45.                 <td>
  46.                     <input type="checkbox" name="item" value="SN-1020" checked />
  47.                 </td>
  48.                 <td>
  49.                     <a href=""><img src="images/p2.jpg" alt="" /></a>
  50.                 </td>
  51.                 <td>小米pro 11</td>
  52.                 <td>部</td>
  53.                 <td class="price">3999</td>
  54.                 <td><input type="number" min="1" value="2" /></td>
  55.                 <td class="amount">xxxx</td>
  56.             </tr>
  57.             <tr>
  58.                 <td>
  59.                     <input type="checkbox" name="item" value="SN-1030" checked />
  60.                 </td>
  61.                 <td>
  62.                     <a href=""><img src="images/p3.jpg" alt="" /></a>
  63.                 </td>
  64.                 <td>MacBook Pro</td>
  65.                 <td>台</td>
  66.                 <td class="price">18999</td>
  67.                 <td><input type="number" min="1" value="1" /></td>
  68.                 <td class="amount">xxxx</td>
  69.             </tr>
  70.             <tr>
  71.                 <td>
  72.                     <input type="checkbox" name="item" value="SN-1040" checked />
  73.                 </td>
  74.                 <td>
  75.                     <a href=""><img src="images/p4.jpg" alt="" /></a>
  76.                 </td>
  77.                 <td>小米75电视</td>
  78.                 <td>台</td>
  79.                 <td class="price">5999</td>
  80.                 <td><input type="number" min="1" value="2" /></td>
  81.                 <td class="amount">xxxx</td>
  82.             </tr>
  83.             <tr>
  84.                 <td>
  85.                     <input type="checkbox" name="item" value="SN-1050" checked />
  86.                 </td>
  87.                 <td>
  88.                     <a href=""><img src="images/p5.jpg" alt="" /></a>
  89.                 </td>
  90.                 <td>Canon 90D单反</td>
  91.                 <td>台</td>
  92.                 <td class="price">9699</td>
  93.                 <td><input type="number" min="1" value="1" /></td>
  94.                 <td class="amount">xxxx</td>
  95.             </tr>
  96.         </tbody>
  97.         <tfoot>
  98.             <tr style="font-weight: bolder; font-size: 1.2em">
  99.                 <td colspan="5">总计:</td>
  100.                 <td id="sum">xxxx</td>
  101.                 <td id="total-amount">xxxx</td>
  102.             </tr>
  103.         </tfoot>
  104.     </table>
  105.     <div style="width: 90%; margin: 10px auto">
  106.         <button style="float: right; width: 100px">结算</button>
  107.     </div>
  108.     <script>
  109.         // 1.全选复选框
  110.         const checkAll = $("#check-all");
  111.         // 2.独立复选框
  112.         const checkItems = $("input[name='item']");
  114.         // 改变全选，独立复选框也改变
  115.         checkAll.change(ev => checkItems.each(function () {
  116.             $(this).prop("checked", $(ev.target).is(":checked"));
  117.         }))
  119.         // 改变独立复选框，改变全选
  120.         checkItems.change(() => checkAll.prop("checked", [...checkItems].every(item => item.checked)));
  121.     </script>
  122. </body>
  124. </html>

2.勾选/不勾选商品时购物车自动完成计算

  • 勾选

  • 不勾选

  1. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>购物车勾选不勾选时自动完成计算</title>
  7.     <link rel="stylesheet" href="style.css" />
  8. </head>
  10. <body>
  11.     <table>
  12.         <caption>
  13.             购物车
  14.         </caption>
  15.         <thead>
  16.             <tr>
  17.                 <!-- 全选复选框 -->
  18.                 <th><input type="checkbox" name="checkAll" id="check-all" checked /><label for="check-all">全选</label>
  19.                 </th>
  20.                 <th>图片</th>
  21.                 <th>品名</th>
  22.                 <th>单位</th>
  23.                 <th>单价/元</th>
  24.                 <th>数量</th>
  25.                 <th>金额/元</th>
  26.             </tr>
  27.         </thead>
  28.         <tbody>
  29.             <tr>
  30.                 <td>
  31.                     <input type="checkbox" name="item" value="SN-1020" checked />
  32.                 </td>
  33.                 <td>
  34.                     <a href=""><img src="images/p1.jpg" alt="" /></a>
  35.                 </td>
  36.                 <td>iPhone 11</td>
  37.                 <td>台</td>
  38.                 <td class="price">4799</td>
  39.                 <td><input type="number" min="1" value="1" /></td>
  40.                 <td class="amount">xxxx</td>
  41.             </tr>
  42.             <tr>
  43.                 <td>
  44.                     <input type="checkbox" name="item" value="SN-1020" checked />
  45.                 </td>
  46.                 <td>
  47.                     <a href=""><img src="images/p2.jpg" alt="" /></a>
  48.                 </td>
  49.                 <td>小米pro 11</td>
  50.                 <td>部</td>
  51.                 <td class="price">3999</td>
  52.                 <td><input type="number" min="1" value="2" /></td>
  53.                 <td class="amount">xxxx</td>
  54.             </tr>
  55.             <tr>
  56.                 <td>
  57.                     <input type="checkbox" name="item" value="SN-1030" checked />
  58.                 </td>
  59.                 <td>
  60.                     <a href=""><img src="images/p3.jpg" alt="" /></a>
  61.                 </td>
  62.                 <td>MacBook Pro</td>
  63.                 <td>台</td>
  64.                 <td class="price">18999</td>
  65.                 <td><input type="number" min="1" value="1" /></td>
  66.                 <td class="amount">xxxx</td>
  67.             </tr>
  68.             <tr>
  69.                 <td>
  70.                     <input type="checkbox" name="item" value="SN-1040" checked />
  71.                 </td>
  72.                 <td>
  73.                     <a href=""><img src="images/p4.jpg" alt="" /></a>
  74.                 </td>
  75.                 <td>小米75电视</td>
  76.                 <td>台</td>
  77.                 <td class="price">5999</td>
  78.                 <td><input type="number" min="1" value="2" /></td>
  79.                 <td class="amount">xxxx</td>
  80.             </tr>
  81.             <tr>
  82.                 <td>
  83.                     <input type="checkbox" name="item" value="SN-1050" checked />
  84.                 </td>
  85.                 <td>
  86.                     <a href=""><img src="images/p5.jpg" alt="" /></a>
  87.                 </td>
  88.                 <td>Canon 90D单反</td>
  89.                 <td>台</td>
  90.                 <td class="price">9699</td>
  91.                 <td><input type="number" min="1" value="1" /></td>
  92.                 <td class="amount">xxxx</td>
  93.             </tr>
  94.         </tbody>
  95.         <tfoot>
  96.             <tr style="font-weight: bolder; font-size: 1.2em">
  97.                 <td colspan="5">总计:</td>
  98.                 <td id="sum">xxxx</td>
  99.                 <td id="total-amount">xxxx</td>
  100.             </tr>
  101.         </tfoot>
  102.     </table>
  103.     <div style="width: 90%; margin: 10px auto">
  104.         <button style="float: right; width: 100px">结算</button>
  105.     </div>
  106.     <script>
  107.         // 全选复选框
  108.         const checkAll = document.getElementById("check-all");
  109.         const checkItems = document.getElementsByName("item");
  111.         // 改变全选，独立复选框也改变
  112.         checkAll.onchange = ev => checkItems.forEach(item => item.checked = ev.target.checked);
  113.         // 改变独立复选框，改变全选
  114.         checkItems.forEach(item => item.onchange = () => checkAll.checked = [...checkItems].every(ele => ele.checked));
  116.         // 购物车，自动计算
  117.         function cart() {
  118.             // 独立单价组
  119.             let priceArr = [...document.getElementsByClassName("price")].map(p => p.textContent * 1);
  120.             // 独立数量数组
  121.             let numbersArr = [...document.querySelectorAll("input[type='number']")].map(n => n.value * 1);
  122.             // 独立金额数组
  123.             let aumoutsArr = [priceArr, numbersArr].reduce((total, curr) => total.map((item, i) => item * curr[i]));
  125.             // 独立金额数据填充，由单品数量改变时触发，与独立复选框状态无关
  126.             document.querySelectorAll(".amount").forEach((ele, i) => (ele.textContent = aumoutsArr[i]));
  128.             // 获取所有独立复选框元素
  129.             let items = document.getElementsByName("item");
  130.             // 过滤出所有独立复选框选中状态的数量数组
  131.             numbersArr = numbersArr.filter((ele, i) => [...items][i].checked);
  132.             // 过滤出所有独立复选框选中状态的金额数组
  133.             aumoutsArr = aumoutsArr.filter((ele, i) => [...items][i].checked);
  135.             // 计算总数量和总金额
  136.             let sum = numbersArr.reduce((pre, cur) => pre + cur, 0);
  137.             let total = aumoutsArr.reduce((pre, cur) => pre + cur, 0);
  139.             // 填充总数量和总金额到页面中
  140.             document.getElementById("sum").textContent = sum;
  141.             document.getElementById("total-amount").textContent = total;
  143.         }
  144.         // 改变单品数量时触发
  145.         document.querySelectorAll("input[type='number']").forEach(ele => ele.onchange = cart);
  146.         // 改变独立复选框状态时触发
  147.         document.getElementsByName("item").forEach(item => item.onchange = cart);
  148.         // 全选状态改变时触发
  149.         document.getElementById("check-all").addEventListener("change", cart);
  150.         // 页面载入完成时加载
  151.         window.onload = cart;
  152.     </script>
  153. </body>
  155. </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