axure实现复选框全选_AxureRP教程

AxureRP提供了一系列常用的组件，其中也包括了单选框和复选框，应该来说这两个组件是经常会用到的，涉及选择项的时候，就会想是要做单选控制还是多选控制。常见的用法不做过多解释，这里介绍一下AxureRP里是如何来设置实现一些单选框和复选框的较为复杂的交互效果的。

AxureRP提供的单选框默认是以个体为单位，也即在摆放多个单选框的时候，每个选项都是可以被选中的，这其实也就失去了单选的实际意思，不过在保真度要求不高的情况下其实影响也不大，毕竟原型只是配合演示解说，并不能取代解说。不过其实AxureRP提供了将单选项分组的功能，而且设置非常简单，这样就可以实现一组单选里面只能选择其中一个的功能。

添加几个单选框组件，然后将所有单选框全都选中之后点右键—-编辑单选框—分配单选组，会有一个弹出框提示，输入一个组名字即可，这样就完成了单选组的分配，非常简单，可查看演示例子。

复选框组件就不存在这个问题了，因为本身就是多选的属性，但复选项目多了之后就会有一个问题，那就是用户需要点很多次，这就需要有一个全选的方便功能，可能很多项目里面只有一两项是不需要的，这就需要有一个反选的功能，这样能使操作便捷性提高，提升用户体验。

全选的实现原理比较简单，一种是直接将全部复选框直接指定为选中状态，不过这样实现全部选中是可以的，同时要有全部取消功能的话就不行了，因此另一种方法就是用一个变量来标示当前所有复选框的状态，以此来区分是全部选中还是全部取消选中。反选的稍微麻烦点，需要判断当前每个复选框的状态，如果已选中则置为未选中，如果未选中则置为选中状态。

首先添加两个按钮全选和反选，四个复选框并命名为1、2、3、4。全选的OnClick事件需借用一个变量来判断当前是要执行全部选中，还是执行全部取消,这里使用默认变量OnloadVariable。当变量OnloadVariable等于空时，让复选框1、2、3、4全部选中，并将OnloadVariable的值赋为1。当OnloadVariable等于1时，让复选框1、2、3、4全部取消，并将OnloadVariable的值再置为空。反选的OnClick事件则要判断每个复选框的选择状态，需要注意的是，这里的条件不都是连贯条件，所以需要改为IF…ELSE IF这样的组合。

基本上单选框和复选框的应用就是这样，因为应用的比较普遍了，所以功能上大家都很熟知，当然这里还可以与其他的组件配合使用，来实现更多的交互效果，下面介绍一个红绿灯的效果，这个在设计中很少遇到，但可以转换，比如例子里是红绿灯的切换，实际可以是提示信息切换，选项不同显示不同页面的效果。

首先添加三个单选框分别命名为红灯、黄灯、绿灯，并将这三个单选框分配为一个单选组，再添加一个动态面板用来做提示信息，不同的选项控制不能的面板状态，其中红灯和绿灯的时候还需要有倒计时效果，设置比较简单，用到了OnPageLoad事件来完成整个交互效果。

演示示例在AxureRP5.5版本下调试通过