javascript使用avalon绑定实现checkbox全选


Posted in Javascript onMay 06, 2015

duplex双工绑定是avalon绑定里面最有趣的一个,因为它在内部帮开发者做了很多事,让开发者写的代码减少,代码更优雅。下面随便演示一个常见的checkbox全选。

要求:(老掉牙了,还是说一下)

1.勾选了全选框后,下面的子选框全被勾选;没勾选全选框,则子选框全部不勾选

2.子选框如果有一个未勾选,则取消全选框勾选;

3.子选框全部勾选,则勾选全选框

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css">
  *{
    margin: 0;
    padding: 0;
  }
  #wrap{
    margin-left: 100px;
  }
  #wrap li{
    display: inline-block;
    *display: inline;
    zoom:1;
    vertical-align: middle;
  }
</style>
<script type="text/javascript" src='seed.js'></script>
</head>
<body>
  <div id='wrap' ms-controller='duplex'>
    <p><input type='checkbox' data-duplex-changed="select_all_cb" ms-duplex-checked='select_all'>全选</p>
    <ul>
      <li ms-repeat='list'>
        <input type='checkbox' ms-duplex-number="selected" ms-attr-value='el.id'>{{el.text}}
      </li>
    </ul>
    <p>选中项的id:{{selected}}</p>
  </div>
  <script type="text/javascript">
  require('avalon',function(avalon){
    var duplex=avalon.define('duplex',function(vm){
      vm.selected=[];//保存勾选的选项的id,方便传给后台
      vm.list=[{id:1,text:'aaa'},{id:2,text:'bbb'},{id:3,text:'ccc'},{id:4,text:'ddd'},{id:5,text:'eee'},{id:6,text:'fff'}];
      vm.select_all_cb=function(){//全选框change事件回调
        var list=duplex.list,selected=duplex.selected;
        if(this.checked){
          avalon.each(list,function(i,v){//循环保存着已经勾选选框的数据
            selected.ensure(v['id']);//如果里面没有当前选框的数据,就保存
          });
        }else
          selected.clear();//清空
      };
      vm.select_all=0;
    });
    duplex.selected.$watch('length',function(after){//监听保存数据数组的变化
      var len=duplex.list.length;      
      if(after==len)//子选框全部被勾选
        duplex.select_all=1;
      else//子选框有一个没有被勾选
        duplex.select_all=0;
    });
    avalon.scan();
  });
  </script>
</body>
</html>

效果

javascript使用avalon绑定实现checkbox全选

需要说明几点:

1.data-duplex-changed负责监听checkbox的变化,进而触发回调。

2.ms-duplex-number="selected"这个就是神器,selected数组是和子选项框同步的,互相影响。也就是说,selected数组的元素个数增加或减少,会更新相应子选项框的视图,反之亦然。

3.ms-duplex-*需要与checkbox value属性值的类型相同,否则无法同步视图。像这里,checkbox value值是数字,则用ms-duplex-number。

4.checkbox value属性值的类型有时不要想当然的去判定。本?啪陀龅焦??髅鞔雍筇ù??吹氖?d数字,却无法同步视图,最后改成ms-duplex-string才解决问题。所以'7'还是7,要判断清楚。

从这个小例子可以看到用avalon这类mvvc是多么的提升编码体验,如果不用,想想要写多少个for循环+if判断!

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
js获取ip和地区
Mar 10 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
微信小程序实现签到功能
Oct 31 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
Node.js API详解之 os模块用法实例分析
May 06 Javascript
js实现滑动触屏事件监听的方法
May 05 #Javascript
JS根据生日算年龄的方法
May 05 #Javascript
js改变Iframe中Src的方法
May 05 #Javascript
js网页滚动条滚动事件实例分析
May 05 #Javascript
jquery判断单选按钮radio是否选中的方法
May 05 #Javascript
JQuery中Bind()事件用法分析
May 05 #Javascript
JS判断字符串包含的方法
May 05 #Javascript
You might like
一些PHP写的小东西
2006/12/06 PHP
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
php开启安全模式后禁用的函数集合
2011/06/26 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
7个jQuery最佳实践
2016/01/12 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
python中reload(module)的用法示例详解
2017/09/15 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
Django中modelform组件实例用法总结
2020/02/10 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
python 实现图片批量压缩的示例
2020/12/18 Python
Sony C++笔试题
2013/03/10 面试题
特此通知格式
2015/04/27 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
实现一个简单得数据响应系统
2021/11/11 Javascript
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL