選中復(fù)選框時，文本框中顯示復(fù)選框中的內(nèi)容，并用“，”隔開。

取消復(fù)選框時，文本框中相應(yīng)的內(nèi)容取消。

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

接下來我給大家詳細講解一下，如何實現(xiàn)。

一、分析

需要實現(xiàn)的效果如上所述：

1. 沒有選中復(fù)選框時，文本框提示“未選擇興趣。。?！?；
2. 選中復(fù)選框時，文本框中顯示復(fù)選框中的內(nèi)容，并用“，”隔開；
3. 取消復(fù)選框時，文本框中相應(yīng)的內(nèi)容取消。

二、元件準備

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

三、交互

1. 沒有選中復(fù)選框時，文本框提示“未選擇興趣。。。”

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

2. “選中復(fù)選框時，文本框中顯示復(fù)選框中的內(nèi)容，并用“，”隔開”

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

瀏覽器預(yù)覽時：

這樣的話“未選擇興趣。。。”也留在了文本框中，這和我們的意愿違背，那么如何取消前面的“未選擇興趣。。?！?？

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

瀏覽器預(yù)覽：

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

3. “取消復(fù)選框時，文本框中相應(yīng)的內(nèi)容取消”

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

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

瀏覽器預(yù)覽：

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

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

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

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

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

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

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

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

瀏覽器預(yù)覽，問題解決。

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

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

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

瀏覽器預(yù)覽：

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

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

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

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

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

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

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

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

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

瀏覽器預(yù)覽：

到這里，我們?nèi)繉崿F(xiàn)了復(fù)選框選中時文本內(nèi)容添加到文本框，花了兩個小時寫了這篇文章，雖然花了不少時間，但是寫出了之后還是挺滿足的，這樣做主要是：

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

以后，我還會寫關(guān)于Axure的小文章，歡迎大家交流學(xué)習(xí)

原型預(yù)覽：https://z7ox7s.axshare.com

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

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

本文由 @就這樣吧！ 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議