微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 使用jQuery操作多选按钮，js的购物车计算
博主信息
博文 26
粉丝 0
评论 3
访问量 23276
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
使用jQuery操作多选按钮，js的购物车计算
后网络时代
原创
1335人浏览过

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

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
1条评论
后网络时代 2021-01-15 14:03:01
没有思路能写出来啊，好的我写一下
1楼
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录