1. 程式人生 > 其它 >Axure 多選和取消多選

Axure 多選和取消多選

實現的效果:點選多選,則預設全選,再次點選,預設子項取消全選狀態;

首先開啟Axure,設定三個多選框;多選組合命名55,選項一組合命名51,選項二組合命名52;

我這裡是一個方框,裡面一個白色對號,通過設定選中後方框藍色填充,來區分是否選中;

首先,給三個多選圖示,設定用例為【滑鼠單擊時】-選中狀態為【toggle】,單擊切換選中狀態;

用例新增示例如下;設定選中後則單擊切換選中狀態;

設定【選中】時,填充藍色;;操作如下;

這個時候生成的頁面中,效果是展示未預設選中狀態,單擊沒反應,再次點選,取消選中;這裡為什麼會有一次單擊無效呢?

這裡需要把整個圖示,設定為選中情況;,這個設定完後,就完全符合,開啟頁面,預設選中,單擊後,取消選中,再次點選,選中;

注意:多個多選框,則每個多選框都需要設定以上內容;滑鼠單擊-切換選中狀態(toggle),設定選中狀態的樣子藍色填充,設定為預設選中狀態;

三個選擇框的設定到此就完成了,現在對控制全選按鈕進行條件編輯設定;

首先梳理一下滑鼠單擊後的用例關係,當全選框為選中狀態,則選項一和選項二都為選中狀態;當全選框切換為取消選中,則選項一和選項二都為取消選中狀態;

這裡注意,在case1和case2裡,都必須設定一下選中狀態切換的動作;且這個動作需要再用例的第一順位,否則不生效;

但是,這樣操作後發現,在頁面中,頁面展示為預設全部選中的狀態;如下

點選全選

全選取消選中,但是選項一和選項二仍為選中狀態;單擊二次,全選選中,選項一和選項二為不選中狀態;

這個與預期不符;

原因是,預設全選為選中狀態,第一次單擊,執行case1,切換選中狀態,選中狀態的切換是【選中】-【不選中】,此時第一次單擊,切換成了選中狀態,但是展現效果是不填充;

選項一和選項二判斷【全選】狀態為ture,則執行也是ture,則保持不變;

單擊第二次,toggle的效果,是不選中,也就是fasle,但是展現效果是填充;選項一和選項二執行case2,都更改為fasle;

這裡可能有點繞,回頭會整理出更容易理解的說法補充上來;

這個時候,將條件設定的反過來,效果就對了;

預設開啟效果----------------------------------------------單擊一次效果----------------------------------------------二次單擊效果

或者可以直接參考下面的用例內容;出來的效果就是正常的;