Axure 多選和取消多選
實現的效果:點選多選,則預設全選,再次點選,預設子項取消全選狀態;
首先開啟Axure,設定三個多選框;多選組合命名55,選項一組合命名51,選項二組合命名52;
我這裡是一個方框,裡面一個白色對號,通過設定選中後方框藍色填充,來區分是否選中;
首先,給三個多選圖示,設定用例為【滑鼠單擊時】-選中狀態為【toggle】,單擊切換選中狀態;
用例新增示例如下;設定選中後則單擊切換選中狀態;
設定【選中】時,填充藍色;;操作如下;
這個時候生成的頁面中,效果是展示未預設選中狀態,單擊沒反應,再次點選,取消選中;這裡為什麼會有一次單擊無效呢?
這裡需要把整個圖示,設定為選中情況;,這個設定完後,就完全符合,開啟頁面,預設選中,單擊後,取消選中,再次點選,選中;
注意:多個多選框,則每個多選框都需要設定以上內容;滑鼠單擊-切換選中狀態(toggle),設定選中狀態的樣子藍色填充,設定為預設選中狀態;
三個選擇框的設定到此就完成了,現在對控制全選按鈕進行條件編輯設定;
首先梳理一下滑鼠單擊後的用例關係,當全選框為選中狀態,則選項一和選項二都為選中狀態;當全選框切換為取消選中,則選項一和選項二都為取消選中狀態;
這裡注意,在case1和case2裡,都必須設定一下選中狀態切換的動作;且這個動作需要再用例的第一順位,否則不生效;
但是,這樣操作後發現,在頁面中,頁面展示為預設全部選中的狀態;如下
點選全選
全選取消選中,但是選項一和選項二仍為選中狀態;單擊二次,全選選中,選項一和選項二為不選中狀態;
這個與預期不符;
原因是,預設全選為選中狀態,第一次單擊,執行case1,切換選中狀態,選中狀態的切換是【選中】-【不選中】,此時第一次單擊,切換成了選中狀態,但是展現效果是不填充;
選項一和選項二判斷【全選】狀態為ture,則執行也是ture,則保持不變;
單擊第二次,toggle的效果,是不選中,也就是fasle,但是展現效果是填充;選項一和選項二執行case2,都更改為fasle;
這裡可能有點繞,回頭會整理出更容易理解的說法補充上來;
這個時候,將條件設定的反過來,效果就對了;
預設開啟效果----------------------------------------------單擊一次效果----------------------------------------------二次單擊效果
或者可以直接參考下面的用例內容;出來的效果就是正常的;