全选功能就是
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. Dual Number

    http://ncatlab.org/nlab/show/dual+number http://mathworld.wolfram.com/DualNumber.html https://en.wik ...

  2. [zz] 海洋环境的光能传递

    source: http://cgangs.com/article/2557?source=weibo 就我们的目的来说,海洋环境仅由四部分组成:水表.空气.阳光和水表以下部分.在本节中,我们在数学和 ...

  3. IE8、IE9浏览器下报：JSON未定义 解决方法

    IE8.IE9浏览器下报:JSON未定义的问题 解决方法: 在jsp中引入如下代码 <!-- 解决 IE8.IE9 下显示混乱的问题--><% String browserStrin ...

  4. 51nod 1643 小Q的家庭作业

    题意: f(n) = sigma(gcd(i,n))  1 <= i <= n g(n) = sigma(f(d))    d | n n = x1 * x2 * ... * xm 其中 ...

  5. 编写更好的jQuery代码

    这是一篇关于jQuery的文章,写到这里给初学者一些建议. 现在已经有很多文章讨论jQuery和JavaScript的性能问题,然而,在这篇文章中我计划总结一些提升速度的技巧和一些我自己的建议来改善你 ...

  6. U盘安装CentOS 7.0

    U盘安装CentOS 7.0 由于学习需要centos环境,so上网下载centos安装镜像,发现版本已经到7.0了,(╮(╯▽╰)╭,上次折腾还是6.4的版本呢,)花了一点时间下载下来按照装6.4的 ...

  7. stickUp让页面元素“固定”位置

    stickUp能让页面目标元素“固定”在浏览器窗口的顶部,即便页面在滚动,目标元素仍然能出现在设定的位置. http://www.bootcss.com/p/stickup/

  8. UNIX网络编程-Select模型学习

    1.相关接口介绍 1.1 select ---------------------------------------------------------------------- #include ...

  9. ZOJ 1958. Friends

    题目链接: ZOJ 1958. Friends 题目简介: (1)题目中的集合由 A-Z 的大写字母组成,例如 "{ABC}" 的字符串表示 A,B,C 组成的集合. (2)用运算 ...

  10. 【HEVC】4、HM-16.7编码一个CU(帧内部分) 3.帧内预测各种模式实现

    HEVC中一共定义了35中帧内编码预测模式,编号分别以0-34定义.其中模式0定义为平面模式(INTRA_PLANAR),模式1定义为均值模式(INTRA_DC),模式2~34定义为角度预测模式(IN ...