axure7 地址选择_小楼axure7.0教程（十八）：中继器实现全选、反选和选中计数

哼哼哈兮，打开你的中继器;

吼吼哈嘿，我要把一个框框塞进去;

啊啊……..

不是这样的，楼老师是个正经人!

本篇教程示例原型下载：Axure7.0原型_小楼作品_中继器全选、反选和选中计数.rp

第一式：准备元件

1、 拖出来一个中继器到编辑区;

2、 在外面放上一个复选框用于触发全选、一个按钮用来触发反选、还有一个文本Lable用来显示选中项的数量;

3、 双击打开中继器，删除中继器主页中的矩形，然后拖一个复选框和一个文本Labae进去。

4、创建一个计数用的变量，在示例中楼老师偷懒，用的系统自带的变量。

第二式：整理思路

全选：当复选框被选中时让中继器里面的复选框也被选中;当复选框取消选中的时候中继器里面的复选框也被取消;

反选：当点击反选的时候，中继器里面的复选框切换被选中的状态;

计数：当中继器里面的复选框被选中时，设置变量值递增1，如果选中被取消则变量值递减1，然后让文本显示出来。

第三步：实现过程

1、 设置触发全选的那个复选框的onclick事件，这里要添加两个用例：

A：if被选中的值为真，设置选中中继器中的复选框;

B:else if true ，设置未选中中继器中的复选框。

2、 设置触发反选的那个复选框的onclick事件为：设置被选中的中继器复选框为切换(toggle);

3、 设置中继器中的复选框的“选中状态改变时”事件，这里添加3个用例：

A：if被选中的值为真，设置变量=值[[变量+1]];

B：else if true ，设置变量=值[[变量-1]];

C：if true，设置文本值为：选中了[[变量]]项。

4、在中继器中添加一些测试数据，并且和中继器里面的复选框的文字做绑定。不会这一步的请先学习Axure7.0教程(一)。

好了，下面就是最后的精彩时刻，你准备好了吗?啊!~~~~~~~~~~~~~~~~~~~~~~~~~~~

(此处省略两个单词“The End”)