j**ascript使用**alon绑定实现checkbox全选

时间:2016.04.21 发布人:yangshifangqix

j**ascript使用**alon绑定实现checkbox全选

已解决问题

谷歌yangshifangqix用户在2016.04.21提交了关于“逆转命运的1年j**ascript使用**alon绑定实现checkbox全选”的提问,欢迎大家涌跃发表自己的观点。目前共有1个回答,最后更新于2025-02-09T15:07:15。希望大家能够帮助她。

详细问题描述及疑问:期待您的答案,谢谢你帮我,祝你快乐,愿你事事如意 !

希望以下的回答,能够帮助你。

第1个回答

用户名:YD0012  

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

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

  要求:(老掉牙了,还正千间给试袁风互是说一下)

  1.勾选了全选框后,下面的运子选框全被勾选;没勾选复很较通切红显全选框,则子选框全部不勾选

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

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

  ?

123456789101112131415161元入自上吸东718192021222324252627282930313233343突素华妒资八5363738394041文4243444546474849505152535455565758596061<!DOCTY度到席势PEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><metaname="viewport"content="width=device-width,initia刚北即轴注土弱居l-scale=1.0"><title></title><styletype="text/css">*{margin:0;padding:0;}#wrap{margin-left:100px;}#wrapli{display:inline-block;*display:inline;zoom:1;vertical-align:mid况那谓进输dle;}</style><scripttype="text/j**ascript"src='seed.js'></script></h安ead><body><divid='wrap'ms-controller='**plex'><p><inputtype='checkbox能汽扬导酒固货'data-**plex-changed="s告细长失居职架类助elect_all_cb"ms-**plex-checked='select_all'>全选</p><ul><lims-repeat='lis善每限重念孔汽期传江李t'><inputtype='check命据免香强box'ms-**plex-**mber="select元机减ed"ms-attr-value='el.id'>{{el.text}}</li></ul><p>选中项的id:组雷教认判星{{selected}}</p></div><scripttype="text此/j**ascript">require('**alon',function(**alon){var**plex=**alon.define('**plex',function(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'}];***.select_all_cb=function(){//全选框change事件回调varlist=**plex.list,selected=***.selected;if(this.checked){**alon.each(list,function(i,v){//循环保存着已经勾选选框的**selected.ensure(v['id']);//如果里面没有当前选框的**,就保存});}elseselected.clear();//清空};***.select_all=0;});***.selected.$watch('length',function(after){//**保存**数组的变化varlen=**plex.list.length;if(after==len)//子选框全部被勾选***.select_all=1;else//子选框有一个没有被勾选***.select_all=0;});**alon.scan();});</script></body></html>

  效果

  需要说明几点:

  1.data-**plex-changed负责**checkbox的变化,进而触发回调。

  2.ms-**plex-**mber="selected"这个就是神器,selected数组是和子选项框同步的,互相影响。也就是说,selected数组的元素个数增加或减少,会更新相应子选项框的视图,反之亦然。

  3.ms-**plex-*需要与checkboxvalue属性值的类型相同,否则无法同步视图。像这里,checkboxvalue值是数字,则用ms-**plex-**mber。

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

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

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