全选功能就是
1.点击全选控制循环元素是否选中。（点击全选，下面的所有元素选中，再次点击 所有元素取消选中。）
2.点击循环元素控制全选。（如果当前元素是未选中状态则全选不选中，如果当前元素是选中状态并且检查其他也是选中状态则全选按钮也选中，如果当前元素是选中状态并且检查其他的不全都是全中状态则全选按钮不选中）
 
首先我们来建一个avalon页面。
 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>select all</title>

         <script type="text/javascript" src="../avalon.shim.js" ></script>

         <script type="text/javascript">

             var model=avalon.define({

                 $id:"test",

                 data:[{checked:false},{checked:false},{checked:false}]

             });

         </script>

     </head>

     <body>

         <table ms-controller="test" border="1">

             <tr>

                 <td><input type="checkbox" />全选</td>

             </tr>

             <tr ms-repeat="data">//ms-repeat="data"放入需要循环的元素中（这里需要循环tr，data是vm里头定义的属性，属性值类型是对象数组，对象是checked:false未被选中的意思）

                 <td><input type="checkbox" />xxxxxxx</td>

             </tr>

         </table>

     </body>

 </html>
效果是这样的：
 
实现全选效果功能点一：
1.在全选input上加上双向绑定属性ms-duplex-checked="allchecked"
2.在vm里头定义属性allchecked:false(跟第一步的双向绑定值对应，如果是false就是不选中，如果是true就是选中)
3.在全选input上再加上data-duplex-changed="checkAll",这个事件绑定属性的意思是当全选的checkbox状态发生变化时触发。
4.定义checkAll函数。函数里头需要将当前的全选的checkbox的值赋给vm的allchecked属性这样这个属性的值就随着checkbox的值的变化而变化。然后把这个值赋给一个变量，方便后边用。然后我们遍历vm的data，通过形参el获取到每个checkbox对象，然后把上边定义的变量赋给每个checkbox对象。这样我们三个checkbox的值就跟全选的checkbox的值保持一致了。
5.在循环元素中添加ms-duplex-checked="el.checked"，双向同步checkbox属性，将全选的属性赋给每个循环元素。
好了，到这一步，功能点一就实现了。点击全选 下面的所有元素选中，再次点击 所有元素取消选中。
我们看下代码和效果：
 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>select all</title>

         <script type="text/javascript" src="../avalon.shim.js" ></script>

         <script type="text/javascript">

             var model=avalon.define({

                 $id:"test",

                 data:[{checked:false},{checked:false},{checked:false}],

      　　　　　　 allchecked:false,

                 checkAll:function(){

                     var bool = model.allchecked = this.checked;

                     model.data.forEach(function(el){

                         el.checked = bool;

                     });

                 }

             });

         </script>

     </head>

     <body>

         <table ms-controller="test" border="1">

             <tr>

                 <td><input type="checkbox"  ms-duplex-checked="allchecked" data-duplex-changed="checkAll"/>全选</td>

             </tr>

             <tr ms-repeat="data">

                 <td><input type="checkbox" ms-duplex-checked="el.checked"/>xxxxxxx</td>

             </tr>

         </table>

     </body>

 </html>

　

　

实现全选效果功能点二：
分析：要实现下面三个checkbox点击控制全选checkbox，就要在下面对象元素中添加对象监听方法，这样在每点一次都执行一次方法判断对全选checkbox的操作。
1.在循环对象元素中添加对象监听属性data-duplex-changed="checkOne"
2.在vm里写checkOne函数方法（也就是没点击一次循环元素要执行的方法）。这个方法是实现功能点二的关键。逻辑我们来分析一下。首先我们要判断当前的元素是否是选中，如果没有选中，就将vm里头的allchecked赋为false，这样全选也就同步为不选中了；如果选中，就调用vm里面data这个数组的一个every方法，这个方法用来检查data数组中的每个元素值是否相同，只要有一个不符合就返回false，否则返回true，这个逻辑恰恰就是我们要的逻辑。好，有这个返回值之后我们就可以把这个赋给vm里头的allchecked，这样就实现了如果是选中并且每个元素都选中的时候就返回true赋给全选的checkbox这样全选也选中了。如果是选中但是检查下来不是每个元素都一致那么就返回false，这个时候全选的checkbox还是未选中状态。
好，到这里我们就实现了功能点二了。看下代码和视图。
 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>select all</title>

         <script type="text/javascript" src="../avalon.shim.js" ></script>

         <script type="text/javascript">

             var model=avalon.define({

                 $id:"test",

                 data:[{checked:false},{checked:false},{checked:false}],

11　　　　　　　　　　allchecked:false,

                 checkAll:function(){

                     var bool = model.allchecked = this.checked;

                     model.data.forEach(function(el){

                         el.checked = bool;

                     });

                 },

                 checkOne:function(){

                     if(!this.checked){

                         model.allchecked = false;

                     }else{

                         model.allchecked = model.data.every(function(el){

                             return el.checked;

                         });

                     }

                 }

             });

         </script>

     </head>

     <body>

         <table ms-controller="test" border="1">

             <tr>

                 <td><input type="checkbox"  ms-duplex-checked="allchecked" data-duplex-changed="checkAll"/>全选</td>

             </tr>

             <tr ms-repeat="data">

                 <td><input type="checkbox" ms-duplex-checked="el.checked" data-duplex-changed="checkOne"/>xxxxxxx</td>

             </tr>

         </table>

     </body>

 </html>

　　

总结分析：
全选效果其实就是两步：
第一步是点全选控制下面的循环元素是否选中。
第二步是点循环元素控制全选元素是否选中。（这一步是关键，因为循环元素有多个所以在判断当前元素选中的时候还得判断其他元素是否保持一致，如果保持一致就选中，没保持一致就不选中）
然后第一步要vm定义一个布尔属性用于同步全选的状态，还要定义一个监听函数用于将当前的状态赋给下面循环元素的状态。
 
难点总结：
功能点一上：forEach方法用于遍历data，通过形参el获取到每个checkbox对象，el.checked=bool的意思是将每个checkbox对象的值都赋上全选checkbox的值。这样三个checkbox的值就跟全选的checkbox的值同步了。
功能点二上：点击循环元素控制全选跟点击全选控制循环元素的不同在于循环元素的条数是有可能会大于1的，所以这个时候就要增加一个对每个循环元素值是否一致的判断。every方法是data数组的。能检查data数组下每个元素的值是否相同，相同则返回true，不相同返回false。
 

avalon全选效果分析讲解的更多相关文章

  1. jQuery实现全选效果【转】

    这是一段用jquery实现全选的代码,主要思路如下: 1.所有的复选框都有单击事件,所有效果都是在单击事件下实现的 2.全选复选框所实现的功能与其他复选选项实现的功能不同,所有在单击事件内做一个判断, ...

  2. vue实现全选效果

    vue实现全选效果 接触vue快半年了,记得刚用vue做项目的时候遇到一个全选功能,当时到处百度也没有找到怎么实现,最后还是用了jquery进行dom操作实现的. 今天没事就顺手写了一个,感觉很简单, ...

  3. react 使用antd的多选功能做一个单选与全选效果

    一个小而简单的单选全选功能,其实官网已经给出效果了,不过是我多做了些复合用法 addorupdatemodal.jsx import React from "react"; imp ...

  4. jQ全选效果

    <ul id="list"> <li><label><input type="checkbox" value=&quo ...

  5. checkbox 全选效果

    html部分 <p id="all">全选</p> <input type="checkbox" /><br/> ...

  6. 关于checkbox全选与反选的问题

    在一组checkbox中常有这样的需求,选择全选按钮,所有的选项必须全选上,当再次点击时,则所有的按钮必须反选,当点击一组checkbox时,只有有一个不选上,则按钮不选中,当所有的按钮全部选上时,此 ...

  7. js EasyUI前台 全选的实现

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWcAAAEQCAIAAADj/SKjAAAgAElEQVR4nO1dz48ry1W+/5N3swaFEP ...

  8. angular4 checkbox复选框的全选，反选及个别选择

    <label><input type="checkbox" name="" [(ngModel)]="master"> ...

  9. asp.net中Repeater结合js实现checkbox的全选/全不选

    前台界面代码: <input name="CheckAll" type="checkbox" id="CheckAll" value= ...

随机推荐

  1. Managing a node remotely by using the netapp SP

    Managing a node remotely by using the Service Processor The Service Processor (SP) is a remote manag ...

  2. How to backup your blogs on cnblogs

    This is an alternative to OfflineExplorer. Thanks for this article[1] which is listed in Reference s ...

  3. ASP.NET在IIS7.5(IIS7)配置伪静态

    http://jingyan.baidu.com/article/67508eb4ff92c69cca1ce49a.html 我相信不少站长都遇到个头疼的问题..NET如何在IIS7或者IIS7.5下 ...

  4. 防止在iOS设备中的Safari将数字识别为电话号码

    在测试中发现iPad上的Safari总会把长串数字识别为电话号码,文字变成蓝色,点击还会弹出菜单添加到通讯录. 别的地方倒也罢了,如果在用户名中出现数字(手机注册新浪微博的话用户名就是“手机用户xxx ...

  5. git学习：多人协作，标签管理

    多人协作: 查看远程库的信息, git remote 推送分支到远程库 git push origin master/dev 注意:master是主分支,时刻需要与远程同步 dev是开发分支,也需要与 ...

  6. AOP的基本概念

    1)aspect(切面):实现了cross-cutting功能,是针对切面的模块.最常见的是logging模块,这样,程序按功能被分为好几层,如果按传统的继承的话,商业模型继承日志模块的话根本没有什么 ...

  7. Disruptor 极速体验

    已经不记得最早接触到 Disruptor 是什么时候了,只记得发现它的时候它是以具有闪电般的速度被介绍的.于是在脑子里, Disruptor 和"闪电"一词关联了起来,然而却一直没 ...

  8. HBase最佳实践－列族设计优化

    本文转自hbase.收藏学习下. 随着大数据的越来越普及,HBase也变得越来越流行.会用HBase现在已经变的并不困难,然而,怎么把它用的更好却并不简单.那怎么定义'用的好'呢?很简单,在保证系统稳 ...

  9. HTTP 协议详解

    相关文章:HTTP 协议之压缩 当今web程序的开发技术真是百家争鸣,ASP.NET, PHP, JSP,Perl, AJAX 等等. 无论Web技术在未来如何发展,理解Web程序之间通信的基本协议相 ...

  10. [AIR] 获取U盘，打开U盘

    示例: 获取存储卷的方法: package com.controls { import flash.events.StorageVolumeChangeEvent; import flash.file ...