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