search

博客列表 >使用jQuery操作多选按钮，js的购物车计算

使用jQuery操作多选按钮，js的购物车计算

后网络时代
后网络时代原创
2021年01月15日 15:06:101005浏览

使用jQuery完成购物车全选/全不选操作

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  9.   </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></th>
  19.           <th>图片</th>
  20.           <th>品名</th>
  21.           <th>单位</th>
  22.           <th>单价/元</th>
  23.           <th>数量</th>
  24.           <th>金额/元</th>
  25.         </tr>
  26.       </thead>
  27.       <tbody>
  28.         <tr>
  29.           <td>
  30.             <input type="checkbox" name="item" value="SN-1020" checked />
  31.           </td>
  32.           <td>
  33.             <a href=""><img src="images/p1.jpg" alt="" /></a>
  34.           </td>
  35.           <td>iPhone 11</td>
  36.           <td>台</td>
  37.           <td>4799</td>
  38.           <td><input type="number" min="1" value="1" /></td>
  39.           <td class="amount">4799</td>
  40.         </tr>
  41.         <tr>
  42.           <td>
  43.             <input type="checkbox" name="item" value="SN-1020" checked />
  44.           </td>
  45.           <td>
  46.             <a href=""><img src="images/p2.jpg" alt="" /></a>
  47.           </td>
  48.           <td>小米pro 11</td>
  49.           <td>部</td>
  50.           <td>3999</td>
  51.           <td><input type="number" min="1" value="2" /></td>
  52.           <td class="amount">7998</td>
  53.         </tr>
  54.         <tr>
  55.           <td>
  56.             <input type="checkbox" name="item" value="SN-1030" checked />
  57.           </td>
  58.           <td>
  59.             <a href=""><img src="images/p3.jpg" alt="" /></a>
  60.           </td>
  61.           <td>MacBook Pro</td>
  62.           <td>台</td>
  63.           <td>18999</td>
  64.           <td><input type="number" min="1" value="1" /></td>
  65.           <td class="amount">18999</td>
  66.         </tr>
  67.         <tr>
  68.           <td>
  69.             <input type="checkbox" name="item" value="SN-1040" checked />
  70.           </td>
  71.           <td>
  72.             <a href=""><img src="images/p4.jpg" alt="" /></a>
  73.           </td>
  74.           <td>小米75电视</td>
  75.           <td>台</td>
  76.           <td>5999</td>
  77.           <td><input type="number" min="1" value="2" /></td>
  78.           <td class="amount">11998</td>
  79.         </tr>
  80.         <tr>
  81.           <td>
  82.             <input type="checkbox" name="item" value="SN-1050" checked />
  83.           </td>
  84.           <td>
  85.             <a href=""><img src="images/p5.jpg" alt="" /></a>
  86.           </td>
  87.           <td>Canon 90D单反</td>
  88.           <td>台</td>
  89.           <td>9699</td>
  90.           <td><input type="number" min="1" value="1" /></td>
  91.           <td class="amount">9699</td>
  92.         </tr>
  93.       </tbody>
  94.       <tfoot>
  95.         <tr style="font-weight: bolder; font-size: 1.2em">
  96.           <td colspan="5">总计:</td>
  97.           <td id="sum">7</td>
  98.           <td id="total-amount">53493</td>
  99.         </tr>
  100.       </tfoot>
  101.     </table>
  102.     <div style="width: 90%; margin: 10px auto">
  103.       <button style="float: right; width: 100px">结算</button>
  104.     </div>
  106.     <script>
  107.       // Array.every(),Array.some()
  108.       // every(callback): 对数组中每个成员进行回调处理,只有全部为true,最终才返回true,否则就是false
  109.       // 类似" and "," 逻辑与 "
  110.       // 说明当前数组中的元素全部都大于3
  111.       //   console.log([5, 6, 7, 8].every(item => item > 3));
  112.       // 因为第一个和第二个不大于6,返回false
  113.       //   console.log([5, 6, 7, 8].every(item => item > 6));
  114.       // 在数组中只要存在大于6的成员,就是返回true
  115.       //   console.log([5, 6, 7, 8].some(item => item > 6));
  117.       // 1. 获取全选复选框,所有独立商品的复选框
  118.      // const checkAll = document.querySelector("#check-all");
  119.      // const checkItems = document.getElementsByName("item");
  120.       // 2. 为全选复选框添加事件: change,当值改变会触发
  121.       // console.log(ev.target.checked); // 看当前全选的状态
  122.      // checkAll.onchange = ev => checkItems.forEach(item => (item.checked = ev.target.checked));
  124.       // 3. 为每个单独的商品复选框添加change
  125.       //checkItems.forEach(
  126.       //  item => (item.onchange = () => (checkAll.checked = [...checkItems].every(item => item.checked)))
  127.      // );
  129.       // 原生js只用了2行有效代码实现
  131. // 作业: 要求用jQuery完成同样的功能
  133. 功能思路：
  134.     //给全选按钮绑定事件
  135. $('input[name="checkAll"]').on('click',function(){
  136.     //根据全选按钮的状态来操作多选项目，这里使用jquery的prop属性来操作。attr是针对自定义属性来操作的。
  137. $('input[name="checkAll"]:checked').length?$('input[name="item"]').prop('checked', true):$('input[name="item"]').prop('checked',false);
  138.       });
  139. //给每个多选项项目绑定click事件，当多选项全选的时候修改全选项目为选中，当多选项有一个没有选中时全选项需改为取消状态
  140. //js支持集体绑定事件，这里集体绑定多选按钮的click事件
  141. $('input[name="item"]').on('click',function(){ 
  142. //当多选按钮的选中个数等于多选按钮数量时则全选按钮修改为选中
  143. //当多选按钮的选中个数不等于（即小于）多选按钮数量时则全选按钮修改为未选中。助于对于DOM元素的固有属性操作使用prop.
  144. $('input[name="item"]:checked').length===$('input[name="item"]').length?$('input[name="checkAll"]').prop('checked', 1):$('input[name="checkAll"]').prop('checked',false);
  145.       })
  146. </script>
  147.   </body>
  148. </html>

效果图：
![![](https://img.php.cn/upload/image/569/487/677/1610684346772514.png)](https://img.php.cn/upload/image/968/169/974/1610684335207145.png)

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

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>
  9.   <body>
  10.     <table>
  11.       <caption>
  12.         购物车
  13.       </caption>
  14.       <thead>
  15.         <tr>
  16.           <!-- 全选复选框 -->
  17.           <th><input type="checkbox" name="checkAll" id="check-all" checked /><label for="check-all">全选</label></th>
  18.           <th>图片</th>
  19.           <th>品名</th>
  20.           <th>单位</th>
  21.           <th>单价/元</th>
  22.           <th>数量</th>
  23.           <th>金额/元</th>
  24.         </tr>
  25.       </thead>
  26.       <tbody>
  27.         <tr>
  28.           <td>
  29.             <input type="checkbox" name="item" value="SN-1020" checked />
  30.           </td>
  31.           <td>
  32.             <a href=""><img src="images/p1.jpg" alt="" /></a>
  33.           </td>
  34.           <td>iPhone 11</td>
  35.           <td>台</td>
  36.           <td class="price">4799</td>
  37.           <td><input type="number" min="1" value="1" /></td>
  38.           <td class="amount">xxxx</td>
  39.         </tr>
  40.         <tr>
  41.           <td>
  42.             <input type="checkbox" name="item" value="SN-1020" checked />
  43.           </td>
  44.           <td>
  45.             <a href=""><img src="images/p2.jpg" alt="" /></a>
  46.           </td>
  47.           <td>小米pro 11</td>
  48.           <td>部</td>
  49.           <td class="price">3999</td>
  50.           <td><input type="number" min="1" value="2" /></td>
  51.           <td class="amount">xxxx</td>
  52.         </tr>
  53.         <tr>
  54.           <td>
  55.             <input type="checkbox" name="item" value="SN-1030" checked />
  56.           </td>
  57.           <td>
  58.             <a href=""><img src="images/p3.jpg" alt="" /></a>
  59.           </td>
  60.           <td>MacBook Pro</td>
  61.           <td>台</td>
  62.           <td class="price">18999</td>
  63.           <td><input type="number" min="1" value="1" /></td>
  64.           <td class="amount">xxxx</td>
  65.         </tr>
  66.         <tr>
  67.           <td>
  68.             <input type="checkbox" name="item" value="SN-1040" checked />
  69.           </td>
  70.           <td>
  71.             <a href=""><img src="images/p4.jpg" alt="" /></a>
  72.           </td>
  73.           <td>小米75电视</td>
  74.           <td>台</td>
  75.           <td class="price">5999</td>
  76.           <td><input type="number" min="1" value="2" /></td>
  77.           <td class="amount">xxxx</td>
  78.         </tr>
  79.         <tr>
  80.           <td>
  81.             <input type="checkbox" name="item" value="SN-1050" checked />
  82.           </td>
  83.           <td>
  84.             <a href=""><img src="images/p5.jpg" alt="" /></a>
  85.           </td>
  86.           <td>Canon 90D单反</td>
  87.           <td>台</td>
  88.           <td class="price">9699</td>
  89.           <td><input type="number" min="1" value="1" /></td>
  90.           <td class="amount">xxxx</td>
  91.         </tr>
  92.       </tbody>
  93.       <tfoot>
  94.         <tr style="font-weight: bolder; font-size: 1.2em">
  95.           <td colspan="5">总计:</td>
  96.           <td id="sum">xxxx</td>
  97.           <td id="total-amount">xxxx</td>
  98.         </tr>
  99.       </tfoot>
  100.     </table>
  101.     <div style="width: 90%; margin: 10px auto">
  102.       <button style="float: right; width: 100px">结算</button>
  103.     </div>
  105.     <script>
  106.       // 1. 获取全选复选框,所有独立商品的复选框
  107.       const checkAll = document.querySelector("#check-all");
  108.       const checkItems = document.getElementsByName("item");
  109.       // 2. 为全选复选框添加事件: change,当值改变会触发
  110.       // console.log(ev.target.checked); // 看当前全选的状态
  111.       checkAll.onchange = ev => checkItems.forEach(item => (item.checked = ev.target.checked));
  113.       // 3. 为每个单独的商品复选框添加change
  114.       checkItems.forEach(
  115.         item => (item.onchange = () => (checkAll.checked = [...checkItems].every(item => item.checked)))
  116.       );
  117.       // =====================================================
  119.       // 获取所有的数量控件
  120.       const numInput = document.querySelectorAll('tbody input[type="number"');
  121.       // 用户更新数量时触发自动计算
  122.       numInput.forEach(input => (onchange = autoCalculate));
  123.       // 购物车刚加载完成时也应该触发自动计算
  124.       window.onload = autoCalculate;
  126.       // 封装一个自动计算的函数
  127.       function autoCalculate() {
  128.         // 获取单价组成的数组
  129.         const prices = document.querySelectorAll("tbody .price");
  130.         const priceArr = [...prices].map(item=>item.textContent * 1);
  131.         console.log(priceArr);
  133.         const priceArr1 = [...prices].map((item,index) =>
  134.          {
  135.                if(checkItems[index].checked){
  136.                     return  item.textContent * 1；
  137.                }
  138.                   else{
  139.                     return  0;
  140.                   }
  141.          }
  142.         );
  143.         console.log('priceArr1',priceArr1);
  144.         // 获取数量组成的数组
  145.         const numbers = document.querySelectorAll("tbody input[type=number]");
  146.         const numArr = [...numbers].map(item => item.value * 1);
  147.         console.log(numArr);
  149.         const numArr1 = [...numbers].map((item,index) =>
  150.          {
  151.                if(checkItems[index].checked){  
  153.                     return  item.value * 1  
  154.                }
  155.                   else{ 
  156.                     return  0;
  157.                   }
  158.          });
  159.          console.log('numArr1:',numArr1);
  161.         // 商品总数
  162.         let sum = numArr1.reduce((pre, cur) => pre + cur);
  163.         console.log(sum);
  165.         // 计算每件商品金额, 单价 * 数量
  166.         const amountArr = [priceArr, numArr].reduce((total, curr) => total.map((item, index) => item * curr[index]));
  167.         console.log(amountArr);
  168.         const amountArr1 = [priceArr1, numArr1].reduce((total, curr) => total.map((item, index) => item * curr[index]));
  169.         // 计算总金额
  170.         let totalAmount = amountArr1.reduce((pre, cur) => pre + cur);
  171.         console.log(totalAmount);
  173.         // 将计算结果渲染到购物车中
  174.         // 总数量
  175.         document.querySelector("#sum").textContent = sum;
  176.         // 总金额
  177.         document.querySelector("#total-amount").textContent = totalAmount;
  178.         // 每个商品的金额
  179.         document.querySelectorAll(".amount").forEach((item, index) => (item.textContent = amountArr[index]));
  180.       }
  182.       // 作业: 让购物车的自动计算依赖于每个商品的复选框的选中状态
  183.       // 只需要重新计算总金额和总数量,每个商品的金额不要重新计算
  184.       // 1. 思路: 为每个商品复选框加change,当change为false时自动计算总金额和总数量
  185.       // 2. 思路: 在获取数量,金额 之前,就要考虑到每个商品的复选框的状态,如果为false,就不要参与到计算中
  187. ------------
  188. 思路：
  189. //让购物车的自动计算依赖于每个商品的复选框的选中状态(注意单独计算)：
  190. //统计商品数量时候，若该商品没有选中在即为零，选中时正常计量：
  191.  const numArr1 = [...numbers].map((item,index) =>
  192.          {
  193.       return  checkItems[index].checked?item.value * 1:0;
  194.          });
  195. //统计商品价格时候，若该商品没有选中在即为零，选中时正常计及价格：
  196.  const priceArr1 = [...prices].map((item,index) =>
  197.          {
  198.  return  checkItems[index].checked? item.textContent * 1:0;
  199.          }
  200.         );
  201. //根据多选按钮状态计算商品总数:
  202. let sum = numArr1.reduce((pre, cur) => pre + cur);
  203. //根据多选按钮状态计算每件商品的总价
  204. const amountArr1 = [priceArr1, numArr1].reduce((total, curr) => total.map((item, index) => item * curr[index]));
  205.  // 根据多选按钮状态计算总金额
  206. let totalAmount = amountArr1.reduce((pre, cur) => pre + cur);
  207. ------------
  209.     </script>
  210.   </body>
  211. </html>

注意：priceArr1 numArr1 amountArr1为新增计算常量
效果图：

![![](https://img.php.cn/upload/image/744/885/248/1610684646498996.png)](https://img.php.cn/upload/image/198/576/738/1610684636926375.png)

上一条：jQuery|原生js-分别购物车全选|全不选-勾选|不勾选自动计算下一条：Vue自学: v-model的使用（双向绑定input标签）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
后网络时代2021-01-15 14:03:011楼
没有思路能写出来啊，好的我写一下

相关文章

查看更多