search

博客列表 >使用jquery实现全选、全不选等购物车操作

使用jquery实现全选、全不选等购物车操作

咸鱼老爷
咸鱼老爷原创
2021年03月08日 14:53:132055浏览

全选与全不全

全选意味着所有的checkbox状态为checked
全不选就是所有的checkbox状态不是checked

原生js实现

  1. //全选
  2.     //1 获取全选复选框，所有独立商品的复选框
  3.     const cheackAll = document.querySelector('#checkall');
  4.     const check = document.querySelectorAll('#check');
  5.     //2 为全选复选框添加事件，change 当值改变会触发
  6.     cheackAll.onchange = ev => (check.forEach(item => {
  7.         item.checked = ev.target.checked;
  8.     }));
  9.     //3 为每个单独的商品复选框添加change
  10.     check.forEach(item => item.onchange = () => {
  11.         cheackAll.checked = [...check].every(item => item.checked);
  12.     })

jq实现

  1. //全选按钮
  2.     const checkAll = $('#checkall');
  3.     const check = $('input[name=check]');
  4.     //实现全选 和全不选
  5.     checkAll.on('change', ev => {
  6.             check.each(function() {
  7.                 $(this).prop('checked', $(ev.target).is(':checked'));
  8.                 auto();
  9.             })
  10.         })
  11.         //单个选择如果全部选中 则全选按钮选中
  12.     check.on('change', function() {
  13.             checkAll.prop('checked', [...check].every(item => $(item).is(':checked')));
  14.         })

效果图

购物车案例

选中和数量有变化时自动计算单个商品的总金额以及选中的所有数量和选中的所有商品的总金额
Array.every(callback):对数组中每个成员进行回调处理，只有全部为true，最终才返回true。否则就是false 类似 “and”
Array.some(callback):对数组中每个成员进行回调处理，当有一个为true，返回就是true

原生js实现

  1.  <style>
  2.         table {
  3.             width: 1000px;
  4.             margin: 0 auto;
  5.             text-align: center;
  6.         }
  7.         table img {
  8.             width: 50px;
  9.         }
  10.         table tfoot tr {
  11.             font-weight: bolder;
  12.             font-size: 1.2em;
  13.         }
  14.     </style>
  15. <body>
  16.     <table>
  17.         <thead>
  18.             <tr>
  19.                 <th><input type="checkbox" id="checkall"></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><input type="checkbox" name="" id="check"></td>
  31.                 <td><img src="1.jpg"></td>
  32.                 <td>这是商品1</td>
  33.                 <td>台</td>
  34.                 <td class="price">4199</td>
  35.                 <td><input type="number" name="num" id="num" value="1"></td>
  36.                 <td class="aprice"></td>
  37.             </tr>
  38.             <tr>
  39.                 <td><input type="checkbox" name="" id="check"></td>
  40.                 <td><img src="1.jpg"></td>
  41.                 <td>这是商品2</td>
  42.                 <td>台</td>
  43.                 <td class="price">4299</td>
  44.                 <td><input type="number" name="num" id="num" value="2"></td>
  45.                 <td class="aprice"></td>
  46.             </tr>
  47.             <tr>
  48.                 <td><input type="checkbox" name="" id="check"></td>
  49.                 <td><img src="1.jpg"></td>
  50.                 <td>这是商品3</td>
  51.                 <td>台</td>
  52.                 <td class="price">4399</td>
  53.                 <td><input type="number" name="num" id="num" value="1"></td>
  54.                 <td class="aprice"></td>
  55.             </tr>
  56.             <tr>
  57.                 <td><input type="checkbox" name="" id="check"></td>
  58.                 <td><img src="1.jpg"></td>
  59.                 <td>这是商品4</td>
  60.                 <td>台</td>
  61.                 <td class="price">4499</td>
  62.                 <td><input type="number" name="num" id="num" value="1"></td>
  63.                 <td class="aprice"></td>
  64.             </tr>
  65.         </tbody>
  66.         <tfoot>
  67.             <tr>
  68.                 <td colspan="5">总计：</td>
  69.                 <td id="sum"></td>
  70.                 <td id="total"></td>
  71.             </tr>
  72.         </tfoot>
  73.     </table>
  74.     <div>
  75.         <button style="float: right;">结算</button>
  76.     </div>
  77. </body>
  78. <script>
  79.     //全选
  80.     //1 获取全选复选框，所有独立商品的复选框
  81.     const cheackAll = document.querySelector('#checkall');
  82.     const check = document.querySelectorAll('#check');
  83.     //2 为全选复选框添加事件，change 当值改变会触发
  84.     cheackAll.onchange = ev => (check.forEach(item => {
  85.         item.checked = ev.target.checked;
  86.         autoCalculate()
  87.     }));
  88.     //3 为每个单独的商品复选框添加change
  89.     check.forEach(item => item.onchange = () => {
  90.         cheackAll.checked = [...check].every(item => item.checked);
  91.         autoCalculate()
  92.     })
  93.     const num = document.querySelectorAll('#num');
  94.     num.forEach(ev => {
  95.             ev.onchange = autoCalculate
  96.         })
  97.         //自动计算
  98.         //获取单价
  99.     function autoCalculate() {
  100.         const prices = document.querySelectorAll('.price');
  101.         let prceArr = [...prices].map(item => item.textContent * 1);
  102.         //获取数量
  103.         let numArr = [...num].map(item => item.value * 1);
  104.         //计算每件商品金额，单价*数量
  105.         let amount = [prceArr, numArr].reduce((total, curr) => total.map((item, index) => item * curr[index]));
  106.         //获取选中商品数量，使用filter 筛选出 选中的checkbox
  107.         let checkNumArr = [...numArr].filter((item, index) => [...check][index].checked);
  108.         //计算选中商品的总金额
  109.         let checkAmountArr = [...amount].filter((item, index) => [...check][index].checked);
  110.         //商品总数量
  111.         let sums = checkNumArr.reduce((pre, cur) => pre + cur, 0);
  113.         //计算总金额
  114.         let toatlAmount = checkAmountArr.reduce((pre, cur) => pre + cur, 0);
  116.         //计算结果渲染到页面中
  117.         document.querySelector('#sum').textContent = sums;
  118.         document.querySelector('#total').textContent = toatlAmount;
  119.         document.querySelectorAll('.aprice').forEach((item, index) => item.textContent = amount[index]);
  120.     }
  121.     autoCalculate()
  122. </script>

jq实现

  1.  //全选按钮
  2.     const checkAll = $('#checkall');
  3.     const check = $('input[name=check]');
  4.     auto();
  5.     //实现全选 和全不选
  6.     checkAll.on('change', ev => {
  7.             check.each(function() {
  8.                 $(this).prop('checked', $(ev.target).is(':checked'));
  9.                 auto();
  10.             })
  11.         })
  12.         //单个选择如果全部选中 则全选按钮选中
  13.     check.on('change', function() {
  14.             checkAll.prop('checked', [...check].every(item => $(item).is(':checked')));
  15.             auto()
  16.         })
  17.         //当数量变化时 也要自动计算价格
  18.     $('input[name=num]').on('change', () => {
  19.         auto();
  20.     })
  22.     function auto() {
  23.         //获取所有单价
  24.         let prices = $('.price').map((index, ele) => $(ele).text() * 1);
  25.         // console.log(prices);
  26.         //获取所有数量
  27.         let num = $('input[name=num]').map((index, ele) => $(ele).val() * 1);
  28.         // console.log(num);
  29.         //计算每件商品金额，单价*数量
  30.         let amount = [prices, num].reduce((total, cur) =>
  31.             total.map((index, item) => item * cur[index])
  32.         );
  34.         //获取选中商品数量，使用filter 筛选出 选中的checkbox
  35.         let checkNum = num.filter(((index, item) => $(check[index]).is(":checked")));
  37.         //计算选中商品的总金额
  38.         let checkAmout = amount.filter(((index, item) => $(check[index]).is(":checked")));
  40.         //商品总数量
  41.         let sums = [...$(checkNum)].reduce((pre, cur) => pre + cur, 0);
  43.         //计算总金额
  44.         let toatlAmount = [...$(checkAmout)].reduce((pre, cur) => pre + cur, 0);
  46.         //将结果渲染到html中
  47.         //每个商品的总价
  48.         $('.aprice').each((index, ele) => $(ele).text(amount[index]));
  49.         //总计数量
  50.         $('#sum').text(sums);
  51.         //总计总金额
  52.         $('#total').text(toatlAmount);
  54.     }

效果图

ES6模块化

  • 导出 export
  1. let userName='ad';
  2. function hello(name){
  3. return 'hello'+name;
  4. }
  5. class User{
  6. constructor(name,price){
  7. this.name=name;
  8. this.price=price;
  9. }
  10. print(){
  11. return this.name+'=>'+this.price+'元'
  12. }
  13. }
  14. export {userName,hello,User}
  15. //别名导出
  16. export {userName as myNmae,hello as echo ,User as User1}
  1.  默认导出
  1.  let useName='ad';
  2.  export default userName;
  3.  //一个模块只循序一个默认导出
  1.  即有默认成员又有静态成员导出

import {email,hello as default}

  • 导入 import
  1. <script type='module'>
  2. import{userName,hello,User} from "./module1.js"
  3. //别名导入
  4. import{userName as myName,hello as echo ,User as User1} from "./module1.js"
  5. </script>
  • 默认导入

import userName from "./module1.js"

即有默认成员又有静态成员导入
import hello,{email} from "./module1.js"

禁止重复声明模块成员
模块成员不允许更新

模块的命名空间

命名空间：是一个容器，内部可以包括任何类型的数据
命名空间是一个对象，可以挂载到当前的全局中；

  1. import * as namespace from "./module1.js";
  2. let usrName;
  3. let hello=()=>{}l
  4. class User{}
  5. console.log(namespace);
上一条：控制器访问与参数解析类以及api天气接口实现输入城市查询天气下一条：实现多文件上传案例 以及 MVC与依赖注入的原理
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多