search

博客列表 >jQuery完成购物车全选/不全选、实现勾选/不勾选商品时购物车自动完成计算

jQuery完成购物车全选/不全选、实现勾选/不勾选商品时购物车自动完成计算

吳
吳 原创
2021年01月19日 19:28:181394浏览

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>
上一条：Vue条件渲染，计算属性Computed与侦听器Watch的共性与区别下一条：Vue入门：条件判断和循环、计算和监听属性和声明周期函数
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多