javascript使用使用avalon绑定实现绑定实现checkbox全选全选
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>
效果
weixin_38725086
- 粉丝: 6
- 资源: 910
最新资源
- 基于SpringBoot的智慧园区后台管理系统全部资料+高分项目+详细文档.zip
- 基于Python课程设计， 智慧校园考试系统，包括用户管理，注册机构，配置题库，答题功能全部资料+高分项目+详细文档.zip
- 基于vue做的智慧水务系统全部资料+高分项目+详细文档.zip
- gripper-internals
- 基于WEBGIS的智慧景区辅助决策系统，全部资料+高分项目+详细文档.zip
- 基于WebGIS的智慧交通系统、全部资料+高分项目+详细文档.zip
- 基于WebGIS智慧养老系统（Vue3+Flask）全部资料+高分项目+详细文档.zip
- 基于大屏管理系统全部资料+高分项目+详细文档.zip
- 基于城市规划勘测设计研究院智慧规划师系统全部资料+高分项目+详细文档.zip
- 基于服务器本地地图的智慧园区视频监控web系统全部资料+高分项目+详细文档.zip
- 基于大数据智慧交通系统全部资料+高分项目+详细文档.zip
- 基于电梯智慧监管系统源码全部资料+高分项目+详细文档.zip
- 威纶通触摸屏如何快速对齐元件（智慧对齐）？.docx
- 基于开源的小型物业管理系统，涵盖停车、安保、客服、工单、收费、财务、办公自动化等模块，目标是构建一个软硬件一体的智慧物业解决方案。全部资料+高分项目+详细文档.zip
- 基于海创智慧园区管理系统全部资料+高分项目+详细文档.zip
- 基于农业岛智慧农业系统Java版，基于Java+Vue+Uni-app开发，在微信公众号、小程序、H5移动端都能使用，代码开源，独立部署，二开很方便，能满足智慧
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0