原型设计:[3]AXURE实现复选框全选和取消全选

时间:2026-02-15 02:38:18

1、 输入需要复选效果的文字,比如选择最适宜居住的城市,拖拽一个矩形,若干个复选按钮,其中一个复选框作为全选选项,然后给每一个复选框进行命名为后面的设置变量值提供方便),如下:

原型设计:[3]AXURE实现复选框全选和取消全选

1、首先选中“城市全选”复选框添加Onclick点击用例,用例命名“全选中效果”,然后给用例添加条件“if选中于 城市全选等于:真”,如下图

原型设计:[3]AXURE实现复选框全选和取消全选

2、然后在这个条件下添加动作,如果选中了“全选”,那么同时选中其他所有城市选项,选择设置变量/部件值>>打开设置编辑器>>依次设置其它所有城市复选框的值为真,点击确定,如下图

原型设计:[3]AXURE实现复选框全选和取消全选

1、在“城市全选”复选框的Onclick点击事件下添加第二个用例“全不选效果”,条件设置为“Else if 选中于 城市全选等于:假”,操作同栏目2中的步骤1

原型设计:[3]AXURE实现复选框全选和取消全选

2、然后在上一步骤的条件下添加动作,如果取消选中“全选”,那么同时取消选中其他所有城市选项,选择设置变量/部件值>>打开设置编辑器>>依次设置其它所有城市复选框的值为假,点击确定,如下图:

原型设计:[3]AXURE实现复选框全选和取消全选

3、全部设置完之后,预览原型,就可以实现全选和全不选效果了,如下图

原型设计:[3]AXURE实现复选框全选和取消全选

4、 如果利用其他组件,例如按钮组件,图形,文字等作为开关控制全选效果,设置步骤同上,只需要在添加用例时,替换本节中用于做控制开关的复选框“城市全选”即可

© 2026 五度知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com