这篇教程，本来我只想简单写写。
但是，我不能容忍不完美的自己。
所以，我把交互做的尽量完善，并把它描述出来，争取每一篇教程都让大家眼前一浪。
看到这么努力的我，还不快来宠幸我？
嘿嘿，我们先来看看要实现什么?
这里，有多个城市的复选框，选中复选框时，在文本框中会出现城市的名称。
你看我屌吗？
说！
看不看？
不是...屌不屌？
好，继续！
当取消某个城市复选框的选中时，文本框中相应的城市名称消失。
是不是好屌？
还没完，后面更爽！
删除文本框中某个城市名称的时候，复选框的选中同步取消！
我艹！这个屌！这个屌！
那么，这些交互都是如何实现的呢？
先别忙！
看到这样目测很复杂的交互，总会有些人开始表示不屑：
Axure学那么深干嘛？这样的东西太浪费时间了吧？原型主要是沟通，做那么高保真有什么用？
呵呵你三叔个哒！那是你！
但你不能代表全人类！
作为一个产品相关的职业者，这么说话，注定你的产品视角狭隘！
学的深是为了更高的效率和应用，只有不了解的人才会说Axure只能做产品原型。
去百度一下Axure，看看使用人群都有哪些好吗？
做交互浪费时间？
如果你学得好，都是分分钟的事！
特别是有些内容，做完一遍可以重复使用。
例如马上要讲的这个案例，就能直接拿走放在一些原型中使用。
最后，你不做交互体验测试，你不洽谈投资，你不投标项目，你怎么知道高保真原型没用？
好了，我发泄完了！
下面开始分析这个案例的关键。
1、文本框没有任何内容时，显示“未选择城市”的提示，添加内容时该提示消失。
2、复选框选中时，要在文本框已有文字后方增加当前复选框的元件文字。
3、复选框取消选中时，要在文本框的内容中清除相应的城市名称。
4、文本框中删除某个城市名称时，对应的复选框同步取消选中。
我们先分析这么多，在后面的制作过程中，我们会遇到一些问题，到时再继续分析。
第一步，我们准备两个元件，一个是复选框，另一个是多行文本框（命名为“CityInput”）。
根据思路分析第1点，我们需要给多行文本框元件“CityInput”在属性中添加提示文字。
第二步，根据思路分析第2点，我们在复选框【选中时】设置交互，添加动作【设置文本】于目标元件文本框“CityInput”为目标元件的现有文本连接当前复选框的文本，并以“,”分隔。
目标元件现有文本，我们可以通过“[[Target.text]]”获取，当前元件的文本可以通过“[[This.text]]”获取。
那么，上述公式中的系统变量“Target”即目标元件，“This”即当前元件，“text”即元件文本。
如果不了解系统变量，请先阅读《AxureRP制作原型中变量的使用（3） 》。
最终，我们通过公式“[[Target.text]],[[This.text]]”,就能够完成我们要的效果。
不过，这个时候大家预览原型，选中复选框，会发现一个软件的Bug，就是我们设置的提示文字“未选择城市”留在了文本框中。
艹，先不管，后面再搞它！
第三步，根据思路分析第3点，复选框【取消选中时】设置交互，添加动作【设置文本】于目标元件文本框“CityInput”。
这里我们要把文本框中相应的城市名称剔除。
换一种说法就是，把文本框中，与取消选中复选框文本相同的城市名称替换为空白。
这里，我们可以把公式写成“[[Target.text.replace(This.text,'')]]”。
用白话念的话，把“.”念成“的”，就是“目标元件的元件文本的替换方法(当前元件的元件文本,空白)”。
公式中的函数replace能够对文本内容进行替换，第一个参数是被替换的内容，第二个参数是替换后的内容。
第四步，我们先不做思路第4点，我们先把前面的Bug解决掉。
在文本框内容改变的时候，我们可以把多余的内容替换成空白。
也就是在文本框元件“CityInput”的【文本改变时】设置交互，添加动作【设置文本】于“当前元件”为“[[This.text.replace('未选择地区,','')]]”。
当完成这一步之后，你会发现还有更多问题等着你！
呜哈哈哈哈哈哈哈！
此时此刻，我想淫湿一手...
《复选框交互出问题啦！》
共有五个复选框，
我把他们都选上，
然后取消1、3、5，
问题多的想撞墙！
好诗！！！
有问题解决问题，是我一贯硬挺的作风。
说干就干！
还是先进行思路分析：
5、文本框内容发生改变时，如果文本中出现两个乱搞的逗号，把它们变成一个。
6、文本框内容发生改变时，如果文本的第一位是逗号，就从第二位开始截取到末尾。
7、文本框内容发生改变时，如果文本的末尾是逗号，就从第一位开始截取，截取比当前文本少一位的数量。
分析完毕，开始设置交互。
第五步,根据思路分析第5点，判断当前元件文字是否包含“,,”，符合条件时，执行动作【设置文本】于“当前元件”为“[[This.text.replace(',,',',')]]”。
第六步，根据思路分析第6点，判断当前元件文字第1位是否为“,”，获取元件文字的第一位我们通过公式“[[This.text.charAt(0)]]”获取。
函数charAt能够获取指定位置的字符，字符串索引位置从0开始，也就是说第一位的位置就是0。
当符合上述条件时，执行动作【设置文本】于“当前元件”为“[[This.text.substr(1)]]”。
函数substr能够对文本进行截取，只输入一个参数时，表示从指定位置截取到末尾。字符串索引位置从0开始，所以这里参数为1，就是从第二位截取到末尾。
第七步，根据思路分析第7点，判断当前元件文字末尾是否为“,”，获取元件文字的最末位我们通过公式“[[This.text.slice(-1)]]”获取。
函数slice也是文本截取函数，参数为负数时表示从后向前读取位置，-1就是倒数第一位，只输入一个参数时，表示从指定位置截取到末尾。
当符合上述条件时，执行动作【设置文本】于“当前元件”为“[[This.text.substr(0,This.text.length-1)]]”。
函数substr，输入两个参数时，第一个参数为截取的起始位置，第二个参数为截取的数量。
系统变量length能够获取文本的长度，也就是字符数量，所以第二个参数“This.text.length-1”表示获取文本当前的字符数量然后进行减1的计算。
通过这样的操作，我们就能舍弃掉文本的最后一位。
但是，这样还有问题，当我们手动输入内容时，逗号是不能输入的。
所以，条件判断中，还要判断文本框元件是否获取焦点的状态。
因为，手动输入时是获取焦点的状态，而通过复选框输入是没有获取焦点的状态。
但是，条件判断中，并没有直接判断焦点是否在元件的功能。
不过，我们可以判断【焦点元件文字】【！=】“当前元件”的【元件文字】来实现这个判断。
如果不相等，则说明是通过复选框选择在输入，就可以去除右侧的逗号。
接下来，我们要完成思路分析第4点，删除城市名称时，将对应的复选框取消选中。
触发很明显，是文本内容改变时。
但是，要做什么呢？
添加多个条件判断，分别去判断当前元件的文字是否包含每一个复选框的文字吗？
那样能够完成，但是太复杂！
我的想法是这样：
4.1、让每个复选框自己去判断自己的文本是否没有被文本框的文本包含，如果不包含的话取消选中自己的选中。
4.2、文本框内容发生改变时，给这些复选框发一个指令让他们自己去执行自己的判断和动作。
有了思路，接下来就是实现过程。
第八步，其实我在复制复选框为多个之前，已经偷偷摸摸的干了一件事，就是思路分析第4.1点！
我给复选框的【载入时】添加了交互，设置条件判断元件“CityInput”的元件文字是否包含“当前元件”的元件文字，符合条件的话执行动作【选中】“当前元件”。
做完这个设置之后，才把复选框复制为多个，编辑为不同的城市名称。
大家现在可以设置完一个复选框的【载入时】交互后，点中【载入时】进行Ctrl+C的复制操作（或者在上面点右键选择复制），然后，点中另一个复选框元件，进行Ctrl+V的粘贴操作（点中元件就粘贴，没有多余操作，很神奇的哦！），这样就能够把交互复制粘贴给其他复选框。
第九步，根据思路第4.2点，我们为元件“CityInput”添加交互，在之前【文本改变时】添加的case1中再增加一个动作。
这个动作叫【触发事件】，通过这个动作我们触发每一个复选框的【载入时】事件。
到这里，这个案例我们就制作完成了。
另外，当复选框数量很多时这种方法也显得繁琐，我在源文件中提供了一种使用中继器的实现方法，再多复选框也只是在数据集中添加城市名称。
还有就是，当显示城市名称的元件不是文本框时如何操作？
在源文件中，我也给出了答案。
最后，再说点题外话。
大家有没有觉得我的东西好长？
没办法，为了让更多的人能爽，我只能尽量长一些，细一些！
我的每篇教程都要写3个小时以上，比如这篇写了4个小时。
不过，相比给某一个人解答问题，我更乐于把时间放在写教程上，这样才能帮助更多的人。
所以，那些私聊我问问题受到冷落，在背后说我坏话的人，羞愧去吧！
还有，那些问问题连个“请”字都不会说，问完问题连个“谢”字都没有的人，一边玩儿去吧！
最后，邀请大家关注微信订阅号“iaxure”（二维码在本站首页右上方），及时获取本站最新动态内容。
硬广插入：《两天掌握Axure RP 8》线下培训，北京、上海正在招生，报名地址https://www.axure.com.cn/product/training/。
源文件下载：http://downloads.iaxure.com/checkbox_input_new.rp
本文参考http://www.iaxure.com/5955.html
http://www.woshipm.com/rp/1095602.html
