全选与全不全

全选意味着所有的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);

更多相关文章

  1. 京东app首页练习
  2. 实战项目：用原生JS实现一个购物车的功能
  3. js模块化操作及购物车案例
  4. 第24章 0118-vue常用指令介绍，学习心得、笔记（实例演示条件渲染， 计
  5. 第22章 0114-购物车实战与ES6模块化技术，学习心得、笔记（jQuery实
  6. 常用的快捷键大全（IT）
  7. 在新建android工程的时候出现This template depends on the Andr
  8. android中使用自定义控件checkbox,ToggleButton,ProgressBar
  9. TabLayout属性详解

随机推荐

  1. Python和Visual Studio需要安装Node.js模
  2. 在javascript中使用onclick在使用onclick
  3. 如何在HTML选择选项列表中保留空间hi
  4. VS2010常用插件介绍之Javascript插件
  5. 将JavaScript对象转换为要插入关系数据库
  6. 使用javascript访问网格内的文本框
  7. 单击元素后的load（）特定href
  8. 简单数据的最佳服务器端数据存储方法
  9. 如何在jquery galleria中滑动包含内部元
  10. 密码强度正则表达式与数字[重复]