選中復選框時，文本框中顯示復選框中的內容，并用“，”隔開。

取消復選框時，文本框中相應的內容取消。

是不是感覺還不錯，見過很多這方面的例子？

接下來我給大家詳細講解一下，如何實現。

一、分析

需要實現的效果如上所述：

1. 沒有選中復選框時，文本框提示“未選擇興趣。。?！?；
2. 選中復選框時，文本框中顯示復選框中的內容，并用“，”隔開；
3. 取消復選框時，文本框中相應的內容取消。

二、元件準備

從元件庫中拖一個復選框，命名“checkbox”,一個多行文本框，命名“hobbyingput”接下來我們開始實現逐步實現上述功能。

三、交互

1. 沒有選中復選框時，文本框提示“未選擇興趣。。?！?/h3>

這個很容易實現我們只需給文本框添加提示文字“未選擇興趣。。?！?，并影藏邊框。

2. “選中復選框時，文本框中顯示復選框中的內容，并用“，”隔開”

我們給復選框“選中時”添加用例，設置文本給文本框“bobbyinput”，用“[[Target.text]],[[This.text]]”實現，“Target.text”為文本框現有的文本，“This.text”為復選框中文本，也就是把復選框中的內容放到文本框中的內容后面，中間用“，”隔開。

瀏覽器預覽時：

這樣的話“未選擇興趣。。?！币擦粼诹宋谋究蛑?，這和我們的意愿違背，那么如何取消前面的“未選擇興趣。。?！?？

我們在文本框“文本改變時”設置文本與“bobbyinput”用[[This.text.replace(‘未選擇興趣。。。’,”)]]實現，我們把當前文本框中的文本進行替換，公式中的函數replace能夠對文本內容進行替換，第一個參數是被替換的內容，第二個參數是替換后的內容。

瀏覽器預覽：

我們成功的把文本框中的“提示文字”取消了，但是又有了一個新的問題，“，”出現在了“bobbyinput”文本框的前面，這明顯也不是我們想要的，這個問題我們先放下，后面再集中解決，我們先解決“復選框取消時，文本框中相應的內容取消”。

3. “取消復選框時，文本框中相應的內容取消”

我們給復選框“選中取消時”添加用例，設置文本給“hobbyinput”用“[[Target.text.replace(This.text,”)]]“實現，也就是當復選框選中取消時，替換目標文本（多行文本框）中的內容，replace()函數前面介紹過了。

這里我剛開始給“this.text”也添了“ ” ”，但是瀏覽器預覽發現并不能達到效果，我理解應該是“變量或者函數”直接使用，不用添加‘’，但是使用文本，或者符號需要添加‘’。

瀏覽器預覽：

咦！好像實現了哦。但是又有一個新問題，復選框文本是不見了，但是“，”仍然存在，而且每選中一次，取消一次，就會多一個“，”。

好了，現在做到這里我們需要將復選框多復制幾個，再到瀏覽器預覽，發現了幾個問題，也就是我們現在所遇到的問題。

（1）中間有兩個或者更多?“，”存在

（2）最前面有一個“，”存在

（3）最后面有一個“，”存在

接下來我們一 一分析，重點也來了。

我們先解決“中間有兩個或者更多?“，”存在”，因為出現這個問題的根本原因就是我們向文本框添加了內容，導致它的文本發生了改變。所以，我們在前面文本框“文本改變時”添加例“case2”添加條件。

如果文本框中包含“,,”替換為“，”。

瀏覽器預覽，問題解決。

接下來解決“最前面有一個“，”存在”同樣在文本框“文本改變時”添加用例“case3”添加條件。獲取元件文字的第一位，我們通過公式“[[This.text.charAt(0)]]”獲取。

函數charAt能夠獲取指定位置的字符，字符串索引位置從0開始，也就是說第一位的位置就是0。

“[[This.text.substr(1)]]”函數substr能夠對文本進行截取，只輸入一個參數時，表示從指定位置截取到末尾。字符串索引位置從0開始，所以這里參數為1，就是從第二位截取到末尾。

瀏覽器預覽：

也解決了，終于到了最后一個問題。

最后我們解決“最后面有一個“，”存在”，同樣的方法，在文本框“文本改變時”添加用例“case4”添加條件。獲取元件文字的最末位，我們通過公式“[[This.text.slice(-1)]]”獲取。

函數slice也是文本截取函數，參數為負數時表示從后向前讀取位置，-1就是倒數第一位，只輸入一個參數時，表示從指定位置截取到末尾。

這里我試著用replace（）函數方法替換，因為文本框最后不包含“，”所以會替換掉整個文本框中的“，”為空白，就沒有“，”隔開效果了。

所以還是要用小樓老師的方法：[[This.text.substr(0,This.text.length-1)]]。

函數substr，輸入兩個參數時，第一個參數為截取的起始位置，第二個參數為截取的數量。

系統變量length能夠獲取文本的長度，也就是字符數量，所以第二個參數“This.text.length-1”表示獲取文本當前的字符數量然后進行減1的計算。

通過這樣的操作，我們就能舍棄掉文本的最后一位。

就是從最面開始截取，如果文本最后存在“，”那么截取位置就是從0到文本倒數第二位。

瀏覽器預覽：

到這里，我們全部實現了復選框選中時文本內容添加到文本框，花了兩個小時寫了這篇文章，雖然花了不少時間，但是寫出了之后還是挺滿足的，這樣做主要是：

1. 自己再次動手，熟練了一遍；
2. 分享給大家，我們一起學習，一起進步。

以后，我還會寫關于Axure的小文章，歡迎大家交流學習

原型預覽：https://z7ox7s.axshare.com

源文件下載：https://pan.baidu.com/s/1qja_hBVRezpjPowL8MPuKw 密碼：ojru

本文參考文章：http://www.iaxure.com/5955.html

本文由 @就這樣吧！ 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議