Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 使用jQuery操作多选按钮，js的购物车计算
Blogger Information
Blog 26
fans 0
comment 3
visits 17747
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操作多选按钮，js的购物车计算
后网络时代
Original
1000 people have browsed it

使用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)

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
1 comments
后网络时代 2021-01-15 14:03:01
没有思路能写出来啊，好的我写一下
1 floor
Author's latest blog post