Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 使用jquery实现全选、全不选等购物车操作
Blogger Information
Blog 45
fans 0
comment 0
visits 34641
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实现全选、全不选等购物车操作
咸鱼老爷
Original
2056 people have browsed it

全选与全不全

全选意味着所有的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);
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
0 comments
Author's latest blog post