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多浏览器兼容写法]
Oct 29 Javascript
用客户端js实现带省略号的分页
Apr 27 Javascript
教你用jquery实现iframe自适应高度
Jun 11 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
最佳的JavaScript错误处理实践
Jul 16 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
纯JS实现五子棋游戏
May 28 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 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
基于mysql的bbs设计(三)
2006/10/09 PHP
php中显示数组与对象的实现代码
2011/04/18 PHP
php输入流php://input使用浅析
2014/09/02 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python数据清洗系列之字符串处理详解
2017/02/12 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
Python 字符串换行的多种方式
2018/09/06 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
离婚上诉状范文
2015/05/23 职场文书
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle