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 相关文章推荐
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
jQuery学习2 选择器的使用说明
Feb 07 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
js图片无缝滚动插件使用详解
May 26 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 has encountered an Access Violation
2007/01/15 PHP
php无限遍历目录示例
2014/02/21 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
php格式化电话号码的方法
2015/04/24 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
JavaScript null和undefined区别分析
2009/10/14 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
基于python中的TCP及UDP(详解)
2017/11/06 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
农民致富事迹材料
2014/01/23 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
银行工作检查书范文
2014/01/31 职场文书
写求职信有什么意义
2014/02/17 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
班级联欢会主持词
2015/07/03 职场文书
调解协议书范本
2016/03/21 职场文书