全选功能就是
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. Can't connect to MySQL server on localhost (0)

    配置双主的时候,由于一台始终连不上另一台. 于是我使用root账号远程登录查看,填入账户密码点击连接,结果就提示这样的错误. 一开始以为是权限的问题,于是就授与所有权,结果还是报一样的错. 重新创建一 ...

  2. 在macos上利用vmware fusion安装Ubuntu

    1. 安装vmware fusion http://www.vmware.com/products/fusion 下载以后,可以在网上找注册码,最好下载最新的,这里下载的是7的版本 2. 下载ubun ...

  3. 快速开发一个PHP电影爬虫

    今天来做一个PHP电影小爬虫.我们来利用simple_html_dom的采集数据实例,这是一个PHP的库,上手很容易.simple_html_dom 可以很好的帮助我们利用php解析html文档.通过 ...

  4. 脚本 用 scp 拷贝文件

    #!/usr/bin/expect set proj_dir /home/jksong/NewsSpark/openid_for_commonid set tmp_data_dir $proj_dir ...

  5. hammerJs-v2.0.4详解

    一.前言 移动端框架当前还处在初级阶段,但相对于移动端的应用来说已经有很长时间了.虽然暂时还没有PC端开发的需求量大,但移动端的Web必然是一种趋势,在接触移动端脚本的过程中,最开始想到的是juqer ...

  6. bootstrap-滚动监听

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. vim常用操作

    vim filename 编辑一个文件 在一般模式里按yy是复制的意思(复制当前行),按yy之前先按相应的数字键就是复制光标所在行到指定的行,然后按p粘贴在一般模式里按dd是删除的意思(也叫做剪切), ...

  8. EF6.0批量插入

    EF6.0批量插入有多种方式,可以使用EntityFramework.Extensions,提供的有BulkInsert. /// <summary> /// 批量插入 /// </ ...

  9. C++ const用法总结

    1 const分顶层const,底层const2 顶层const可以表示任意类型的对象是常量.eg:     const int i:i是一个整型常量    int *const ccc:ccc是指向 ...

  10. XMPP 和 OpenFire

    XMPP XMPP(可扩展消息处理现场协议)是基于可扩展标记语言(XML)的协议,它用于即时消息(IM)以及在线现场探测.是一种数据传输协议. XMPP的前身是Jabber,一个开源形式组织产生的网络 ...