最近開始捯飭Axure，剛做完一個自認為比較簡單的表單，大概完整耗時3天……發現中繼器里面還是有很多坑。

主要界面

預期實現功能

1. 選中每一行，bak（最后一列）出現當前行匯總價格，totalPrice自動匯總；
2. 選中三行后，自動選中chk-all；
3. 取消選中行，自動取消選中chk-all，且匯總價出現變化；
4. 選中/取消選中（含單擊、選中）chk-all，自動選中/取消選中所有行，且價格變化正確；

簡要思路

選中每行可以有三種方案

• 選中isChosen
• 單擊isChosen
• 單擊InfoCombo

最初為了方便，選擇了第三種，事件中內容比較簡單，主要是totalPrice計算公式如圖：

另外，為了滿足自動判斷，初始化全局變量Init為0，用于計算是否需要勾選chk-all，主要邏輯如下：

1. 選中一行，Init=[[Init+1]]，并計算當前行的總價；
2. 取消選中當前行，Init=[[Init-1]]；
3. 選中chk-all，Init=repeater.dataCount（語法將就看下）；
4. 取消選中chk-all，Init=0；

接下來，問題來了。

選中chk-all的時候，如何匯總價格？由于InfoCombo只有“單擊”事件，chk-all的事件中沒有“單擊”，無法觸達每行的計算行為，第三種方案不行；（暫時認為不行）

換方案2，isChosen的單擊事件，剛開始就遇到坑；這貨對于條件的解讀居然是反的。。。網上查到資料解釋如下：

復選框部件支持OnClick事件用于響應單擊操作，在OnClick事件中可以依據復選框部件的狀態執行 相應的動作。但需要注意的時，在此處判斷復選框的狀態得到的是單擊后的復選框的狀態，例如復選框處于未選中狀態，在OnClick事件中，該復選框已處于 選中狀態，如果復選框處于選中狀態，在OnClick事件中，該復選框已處于未選中狀態。

不過繞過這個坑后，由于出現跟方案3類似的情況，仍舊無法匯總價格。

最后回到方案1：選中isChosen復選框時進行計算；

另外，選擇“單擊”chk-all來觸發每行的選中事件，如果使用“選中/未選中”，則會出現前者的未選中事件觸發后者的未選中，導致異常。

關鍵配置如下：

（1）每行

（2）chk-all

從表面上看，應該沒問題了，開始生成頁面測試，出現如下幺蛾子：

選中復選框的時候，“選中”事件觸發了兩次，前思后想，結合第一個方案判斷，應該是：選中復選框的時候，同時算作選中了repeater的當前行（含復選框）。所以僅靠第一個方案仍然無法實現價格匯總，接下來想到方案四，使用單擊計算Init，選中計算價格，不過由于選中觸發兩次，價格匯總有一定難度；

最后回到最初的方案，發現“由于InfoCombo只有“單擊”事件，chk-all的事件中沒有“單擊””這個思路可能有點問題，chk-all單擊時應該能嵌套一個事件。之后，需要設置一個標志位flag來表示單擊事件是否是由chk-all觸發，否則在單擊某行之后再去單擊chk-all，該行會取消選擇；

關鍵設置

chk-all單擊設置（注意allFlag的還原）

每行單擊事件設置

實現效果

總結

1. 正文中標粗部分；
2. 復選框/全選框之間在點擊時的互斥關系，一定要提前想清楚；（體現在標志位使用完之后的重置）

本文由 @盜不留蘅 原創發布于人人都是產品經理。未經許可，禁止轉載。