在用axure制作原型交互时，经常遇到要多选框，几乎每一个人都会在网络上发布或者搜集信息，对于这些杂乱的信息，常见的做法是利用标签对它们进行整理。已选标签同步出现选择的棱，也可以进行手动删除，自动同步，例如，对图片进行分类

 

 

这个功能，我们可以用中继器来做。中继器适用于重复的项目列表，这里就是点击选中复选框时，在上方已选标签列表中会自动添加对应的标签。点击删除已选标签，待选标签中已经被选中的复选框会取消选中。

 

我们一起来看一下具体的做法。首先，我们这里用到的是两个中继器：已选标签和待选标签。其中，已选标签的数据集中暂时没有数据；待选标签中有两列数据，除了tab列，还有一列是用来判断当前项目是否选中，0为未选中，1为选中。

 

 

 

把内容准备好之后，我们就可以开始来进行一下设置。在choice的这个中继器中，我们选择tab。当然，获取数据集中的tab是一定的。除此之外，在每项加载的时候，需要设置选中的状态，就用到了另外的一列数据：selected。如果等于1，设置为选中，否则，设置为未选中。

 

 

在点击待选的标签时，选中和未选中是不一样的。选中标签的时候，需要将数据传递到另一个中继器中也就是已选标签中（命名为chosed），这里只需给chosed中继器中添加一行即可，这一行的数据等于待选中的数据。

 

 

当然，不要忘记，将记录状态的selected的数据更新为1。

 

取消选中标签的时候，跟上面的情况相反，要将已选的数据进行删除，同时将selected的数据更新为0。

 

这时候就能够点击待选的标签，添加或者删除已选标签，像这样：

 

 

选择了标签之后，我们可以在已选标签中点击删除按钮，将已选择的标签删除，同时，取消下方标签的选中状态。那么需要设置删除按钮的鼠标单击时事件。这里的设置其实跟在待选标签中直接取消选中标签思路是一样的：同样将selected中的数据更新为0，同时删除行即可。

 

要注意的是，更新selected数据时条件的设置，当两个中继器中的tab数据一致时，更新数据为0。

 

这个同步选择和删除标签的功能经过分析之后，我们可以知道它的实现并不难。这里用到的是两个中继器，利用添加行和删除行设置标签的选择和删除。另外，在一个中继器中有一列数据是不在界面中有所展示，是用来对状态进行记录，这种使用方式其实在中继器中也是比较常见的。


知道了它的实现原理和方法之后，我们可以举一反三，制作更多类似或者更进一步的功能。举一反三很重要。