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

2025-10-30 10:22:29

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

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢