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

要求:（老掉牙了，还是说一下）

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

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

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

 
 
全选
 
 

 {{el.text}}
 
 
 
选中项的id:{{selected}}
 
 

效果

需要说明几点：

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判断！

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