在Axure中繼器的全選復選框中，有時候會出現“半選中狀態”，這種狀態通常用于提醒用戶，并且在一些特定場景下也有實際的應用。本文作者分享了在Axure中全選復選框時實現“半選中狀態”的方法，一起來看一下吧。

在Axure中繼器的全選復選框中，有時候會出現“半選中狀態”，也被稱為“The indeterminate state（不確定狀態）”。這種狀態是指當子復選框中既有選中狀態的，又有未選中狀態的時候，全選復選框就會呈現出這種不確定的狀態。

半選中狀態通常用于提醒用戶，并且在一些特定場景下也有其實際的應用。例如，當用戶在一組中繼器中選擇部分選項時，如果不是所有選項都被選中了，全選復選框就會呈現出半選中狀態，以提醒用戶還有未選擇的選項。

一、基本教程

先自行準備好以下元件，自行調整元件尺寸、樣式、默認內容、選中時樣式等。

一個帶有多行數據的中繼器，外部包裹一個組合，內部包含：

1）一個動態面板（取名：框選監聽），進階教程時使用：

• 默認的矩形，用來顯示數據，最好添加“選中樣式”效果。
• 一個復選框，用來設置選中狀態。

2）一個3狀態的動態面板（取名：全選操作），用來顯示“全選”功能。

3）一個文本框（取名：每項狀態），用來記錄中繼器每項的選中狀態。

我們先來做全選操作的動態面板吧，演示里使用的是Axure自帶圖標庫。三個狀態分別是：

“未選中狀態”，放入未選中圖標，交互為：

“半選中狀態”，放入半選圖標，交互可根據自身要求設置全選或者不選，按照自身需求來。

“全選中狀態”，放入全選圖標，交互為：

然后中繼器的交互，這里就是初始化文本框的內容：

中繼器外部包裹一個組合，也需要添加交互：

復選框的交互如下，U代表Unchecked未選，C代表Checked選中：

• 選中時設置的文本值為：[[Target.Text.substr(0, Item.index-1)]]C[[Target.Text.substr(Item.index)]]
• 取消選中時的文本值為：[[Target.Text.substr(0, Item.index-1)]]U[[Target.Text.substr(Item.index)]]

最后，文本框利用添加“文本改變時”實時更新動態面板。

最基本的半選功能就完成了。怎么樣？簡單易懂對吧？我們還可以再升級一下。

二、進階先決知識

你對中繼器監聽器了解多少？如果不明白監聽器是什么東西，可以先閱讀一下《Axure監聽之中繼器監聽》這篇文章。最好能夠清楚為什么要用監聽器、什么時候用、以及怎么用。

?。?！這個知識點是中繼器進階應用的基礎，很多以往非常難以實現的交互通過監聽器都可輕松實現。

而且，在上一篇《Axure任意方向鼠標拖拽框選》后，有很多朋友迷茫這個效果能做什么，今天的進階教程就夢幻聯動一下。

三、進階教程

在前面原型的基礎上，將框選功能的動態面板放在中繼器的下層，但需要讓“框選矩形”在初始化時“置頂”。

記得中繼器里的第一層是個動態面板吧？我們先把它做為框選監聽器：

再在框選矩形的“拖動時”里觸發監聽：

四、效果泰酷辣

預覽地址：https://usrsky.axshare.com/#g=1&id=281jfx

趕快添加到你的原型里秀BOSS一臉吧！

五、總結

半選中狀態是復選框中一個比較特殊的狀態，可以幫助用戶更加清晰地理解當前選擇的情況，提高用戶體驗。利用文本框就可以在Axure中輕松實現。