全选功能就是
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. rails下react的demo

    gemfile gem 'react-rails' gen一下 react:install 创建组件 react:component MyComponent name:string age:int v ...

  2. NVMe over Fabrics又让RDMA技术火了一把

    RDMA是个什么鬼?相信大部分不关心高性能网络的童鞋都不太了解.但是NVMe over Fabrics的出现让搞存储的不得不抽出时间来看看这个东西,这篇文章就来介绍下我所了解的RDMA. RDMA(R ...

  3. oracle 11g dbf数据文件从C盘迁移到D盘

    服务器系统为 windows 2008 R2 64位,由于C盘空间将满,要将C盘的oracle的DBF数据文件迁移到D盘下,步骤如下: 1.输入cmd,启动 cmd.exe窗口 2.输入 sqlplu ...

  4. PBR实现

    我们的目标:UnityStandard 我一直作Unity开发,所以环境也就选择了Unity.目标也就是尽可能接近UnityStandard的效果,不过主要为了学习PBR,所以就只实现基本的PBR和法 ...

  5. C# webbrowser实现真正意义上的F5刷新

    关于webbrowser的刷新在C#中有提供方便的方法: webbrowser.refresh(); 但是有时候会发现,不给力啊 那怎么办? 还有一招: webBrowser1.Document.Ex ...

  6. dubbo工作原理

    part -- 外挂1.dubbo借助spring的schema启动和初始化 1.1 spring扫描所有jar下META-INF的spring.handlers和spring.schemas. 1. ...

  7. java编译后字节码解析

    java编译后字节码解析 参考网摘: https://my.oschina.net/indestiny/blog/194260

  8. 集合类 toArray（T[]）

    HashSet<String> deDupe = new LinkedHashSet<>(Arrays.asList(origParams.getParams(paramNam ...

  9. WCF配置

    服务端 <system.serviceModel> <services> <service name="WCF.Homedo.Service.Cache.Ser ...

  10. mount什么意思

    root@Home-Cloud:/mnt# dfFilesystem           1K-blocks      Used Available Use% Mounted on/dev/root  ...