javascript使用avalon绑定实现checkbox全选

 　　checkbox全选应该是一个比较实用的前端技巧吧，很多时候我们都需要点击一个checkbox，然后将所有的复选框自动全部选中，一些CMS系统的后台中，使用本JS效果后，会大大增强了操作体验，那么究竟是如何实现这一功能的呢?

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

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

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

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

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

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<!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>

　　效果


　　需要说明几点：

　　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属性值的类型有时不要想当然的去判定。本屌就遇到过，明明从后台传过来的是id数字，却无法同步视图，最后改成ms-duplex-string才解决问题。所以'7'还是7,要判断清楚。

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

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

时间： 2024-11-05 19:26:16

javascript使用avalon绑定实现checkbox全选的相关文章

javascript使用avalon绑定实现checkbox全选_javascript技巧

duplex双工绑定是avalon绑定里面最有趣的一个,因为它在内部帮开发者做了很多事,让开发者写的代码减少,代码更优雅.下面随便演示一个常见的checkbox全选. 要求:(老掉牙了,还是说一下) 1.勾选了全选框后,下面的子选框全被勾选:没勾选全选框,则子选框全部不勾选 2.子选框如果有一个未勾选,则取消全选框勾选: 3.子选框全部勾选,则勾选全选框 <!DOCTYPE html> <html> <head> <meta http-equiv="Co

ASP.NET 2.0下利用javascript实现TreeView中的checkbox全选

实现了对Treeview控件中选择框CheckBox的全选处理.实现的是菜单选择框父项打勾后它下面的子项选择框全部为打勾.如果其中一项子 项取消打勾父项父项选择框为空.主要效果见下图: 主要的实现原理是在TreeView控件的onclick事件中用JS实现全选操作. <script language="javascript" type="text/javascript"> function OnTreeNodeChecked() { var ele =

javascript中CheckBox全选终极方案

  在javascript页面中实现CheckBox或者Radio的选中状态是一件很容易的事情,下面我们来给大家展示下在asp.net中使用javascript中CheckBox全选终极方案,有需要的小伙伴可以参考下. 在我们的程序开发中经常会要用到CheckBox的全选,通常情况下是在一些数据绑定控件中如Gridview等 下面以Repeater为例,在Repeater的header 和item中放入CheckBox控件 . ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14

新手学JavaScript（四）----CheckBox全选与全不选

    前两天开发界面时,实现了一个新的小功能,CheckBox复选框的全选与全不选 样式的实现 纯CSS实现 VS JQuery+CSS实现     在这给大家推荐一款比较不错的纯CSS实现的CheckBox–CSSCheckBox,用bootstrap里面自带的checkbox和radio样式不太美观,所以就另找了一个插件,这里大家可能会有疑问,为什么要找一个纯CSS实现的CheckBox?     在这里给大家解释一下,如果说你找的Checkbox是用CSS+Javascript实现的话,

实现checkbox全选、反选、取消JavaScript小脚本异常_javascript技巧

今天在实现checkbox全选,反选,取消JavaScript小脚本的时候,总是出现点击后页面瞬间刷新,选择的checkbox全部取消的问题,debug了半天,才发现原来是<button>标签中少写了一个type属性的原因,郁闷啊,希望自己以后少犯这种特别2的错误,特此记录. 复制代码 代码如下: <!-- 以下为错误写法 --> <button name="checkAll" value="全选" class="checkB

javascript中CheckBox全选终极方案_javascript技巧

在我们的程序开发中经常会要用到CheckBox的全选,通常情况下是在一些数据绑定控件中如Gridview等 下面以Repeater为例,在Repeater的header 和item中放入CheckBox控件 . <asp:Repeater ID="rptGroup" runat="server"> <HeaderTemplate> <table width="100%" cellspacing="1&quo

javaScript checkbox全选全不选的问题

问题描述 javaScript checkbox全选全不选的问题 我想用JavaScript做一个全选全不选的效果,但是我在点击全选按钮的时候没有任何反应. 运行结果: 求大腿.... 解决方案 click()方法换个名字,可能和js的名字冲突了 解决方案二: checkbox全选全不选checkBox全选全不选checkbox全选全不选 解决方案三: 进函数了吗???函数里面得到的oinput长度是多少??调试应该就能找出问题吧

javascript实现checkbox全选的代码_javascript技巧

代码: function checkall(checkNames){ var allBoxs = document.getElementsByName(checkNames); for(var i = 0 ;i<allBoxs.length;i++){ if(allBoxs[i].type == 'checkbox'){ if(allBoxs[i].checked==false){ allBoxs[i].checked = true ; }else{ allBoxs[i].checked = f

初学Jquery，自己想做个在Repater里checkbox全选，但是不知道怎么xie

问题描述 初学Jquery,自己想做个在Repater里checkbox全选,但是不知道怎么xie <asp:Repeater ID="repList" runat="server"> <HeaderTemplate> <table> <tr align="center"> <td ><asp:CheckBox ID="CheckBox1" name="