双工双工绑定是avalon绑定中最有趣的一个，因为它帮助开发人员编写更少的代码，并使代码更加优雅。下面是一个常见复选框选择的简单演示。

求：(老土，我们来说说)

1.选中全选框后，将选中下面的所有子选择框；如果未选中“全选”框，则不会选中所有子框

2.如果其中一个子选择框未选中，则取消选中全选框；

3.如果选中了所有子选择框，请选中所有选择框

！DOCTYPE html html health eta 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；padd : 0；} #换行{ margin-left : 100 px；} # wrap Li { display : inline-block；*display:内联；zoom:1垂直对齐：中间；}/style script type=' text/JavaScript ' src=' seed . js '/script/Head body div id=' wrap ' ms-controller=' duplex ' pin put type=' checkbox ' data-duplex-changed=' select _ all _ CB ' ms-duplex-checked=' select _ all ' 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的//保存选中选项的id，方便传输到后台vm.list=[{id:1，text:' AAA'}，{id:2，text:' BBB'}，{id:3，text3360' CCC'}，{id:4，VM . Select _ all _ CB=function(){//Select all box change事件回调varlist=duplex。列表，选中=双工。选中；如果(这个。选中){Avalon。每个(list，function (I，v){//保存选中的选中数据.确保(v['id'])在一个循环中；//如果当前选中的框中没有数据，保存})；} else selected . clear()；//空}；VM . select _ all=0；});复式。选中。$ watch ('length '，function(after){//听保存的数据数组var len=duplex.list.length的变化；If(after==len)//选中所有子复选框。select _ all=1；Else//其中一个子复选框未选中。duplex . select _ all=0；});Avalon . scan()；});/脚本/正文/html效果

需要说明几点：

1.data-duplex-changed负责监控复选框的变化，然后触发回调。

2.ms-duplex-number='selected '这是一个工件，所选数组与子选项框同步，并相互影响。也就是说，如果所选数组中的元素数量增加或减少，相应子选项框的视图将会更新，反之亦然。

3.ms-duplex-*需要与checkbox value属性值属于同一类型，否则视图无法同步。这里，如果复选框值是一个数字，请使用ms-duplex-number。

4.CheckboxValue属性值的类型有时并不是理所当然的。这个刁已经遇到了。很明显，id号是从后台传输的，但视图无法同步。最后改为ms-duplex-string来解决这个问题。所以，‘7’还是‘7’要判断清楚。

从这个小例子中，我们可以看到使用像avalon这样的mvvc对编码体验有多大的改善。如果没有，想想如果判断应该写多少for循环！

以上就是本文的全部内容，希望大家喜欢。