全选功能就是
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. 百度地图api 标注的图标不显示问题

    图中郑州PPT设计制作中心前面应该有一个小的标,但是死活就是不显示. 经过百度搜索和测试,终于解决.应该是页面定义的CSS和百度的冲突了,解决办法如下: 在当前页面中,加入 <style typ ...

  2. LeetCode "Design Twitter"

    A mix of hashmap, list and heap. struct Tw { Tw(long long pts, int tid) { ts = pts; tweetid = tid; } ...

  3. 前端 动态表单提交（post、put）

    第一步:form表单定义统一属性 <input type="text" class="form-value" /> 第二步:获取所有值 var fo ...

  4. 【MySQL】排序原理与案例分析

    前言 排序是数据库中的一个基本功能,MySQL也不例外.用户通过Order by语句即能达到将指定的结果集排序的目的,其实不仅仅是Order by语句,Group by语句,Distinct语句都会隐 ...

  5. day1作业--登录入口

    作业概述: 编写一个登录入口,实现如下功能: (1)输入用户名和密码 (2)认证成功后显示欢迎信息 (3)输错三次后锁定 流程图: readme: 1.程序配置文件: 黑名单文件blacklist.t ...

  6. http 301 和 302 的区别！

    1.什么是301转向?什么是301重定向? 301转向(或叫301重定向,301跳转)是当用户或搜索引擎向网站服务器发出浏览请求时,服务器返回的HTTP数据流中头信息(header)中的状态码的一种, ...

  7. 百度地图API地理位置和坐标转换

    1.由地名(省份.城市.街道等)得到其对应的百度地图坐标: http://api.map.baidu.com/geocoder/v2/?output=json&ak=你从百度申请到的Key&a ...

  8. 如何在Visual Studio里面查看程序的汇编代码？

    开发工具:Visual Studio 2015 1,在源代码中设置至少一个断点,目的让我们进入调试模式. 2,启动调试,当程序进入调试模式,停留在我们设定的断点处时候,使用快捷键"ALT+8 ...

  9. C——第一阶段结束

    C primier 刚好是八月末了,原计划到月中结束的.由于工作上的许多事,忙着学习,测试等.C primier与这周末彻底结束了.加上之前的基础,算是把C又全部重新学习了一遍. 在Linux环境下, ...

  10. System.Threading.Timer 定时器的用法

    System.Threading.Timer 是C# 中的一个定时器,可以定时(不断循环)执行一个任务.它是在线程上执行的,具有很好的安全性.为此  .Net Framework 提供了5个重载的构造 ...