原型設計：[3]AXURE實現複選框全選和取消全選?

在利用AXURE原型工具進行產品設計時，經常用到複選框的全選和取消全選的互動操作，一般選擇複選框來控制選項全選中和全取消的效果，也可以用按鈕或文字等其他作為開關來控制這種效果，下面主要介紹利用一個複選框控制選項全選中和全取消選中的效果

工具/原料

AXURE RP Pro 6.5 原型設計工具

基本設定

輸入需要複選效果的文字，比如選擇最適宜居住的城市，拖拽一個矩形，若干個複選按鈕，其中一個複選框作為全選選項，然後給每一個複選框進行命名（ 為後面的設定變數值提供方便 ），如下：

設定全選中效果

首先選中“城市全選”複選框新增Onclick點選用例，用例命名“全選中效果”，然後給用例新增條件“if選中於 城市全選等於：真”，如下圖

然後在這個條件下新增動作，如果選中了“全選”，那麼同時選中其他所有城市選項，選擇設定變數/部件值>>開啟設定編輯器>>依次設定其它所有城市複選框的值為真，點選確定，如下圖

取消全選中效果

在“城市全選”複選框的Onclick點選事件下新增第二個用例“全不選效果”，條件設定為“Else if 選中於 城市全選等於：假”，操作同欄目2中的步驟1

然後在上一步驟的條件下新增動作，如果取消選中“全選”，那麼同時取消選中其他所有城市選項，選擇設定變數/部件值>>開啟設定編輯器>>依次設定其它所有城市複選框的值為假，點選確定，如下圖：

全部設定完之後，預覽原型，就可以實現全選和全不選效果了，如下圖

如果利用其他元件，例如按鈕元件，圖形，文字等作為開關控制全選效果，設定步驟同上，只需要在新增用例時，替換本節中用於做控制開關的複選框“城市全選”即可