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 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
实现变速回到顶部的JavaScript代码
May 09 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 Javascript
javascript里使用php代码实例
Dec 13 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 Javascript
jquery简单倒计时实现方法
Dec 18 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 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 tp验证表单与自动填充函数代码
2012/02/22 PHP
具有时效性的php加密解密函数代码
2013/06/19 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
JavaScript的Cookies
2008/01/16 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
Python对文件操作知识汇总
2016/05/15 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
工商技校毕业生自荐信
2013/11/15 职场文书
心得体会的写法
2014/09/05 职场文书
政府四风问题整改措施
2014/10/04 职场文书
西安事变观后感
2015/06/12 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL