本文是作者在阅读了相关文章后，对于复选框选中时可以将选项添加到文本框中的一些理解，来与大家分享，一起来看看~
昨天阅读了小楼老师一篇文章，关于复选框选中时可以将选项添加到文本框中，觉得很实用，所以想用自己的理解分享出来，直接上图说明。
1、在电脑上打开一个excel文档，进入主编辑界面。2、在excel界面上方菜单栏中找到“插入选项”进行点击，在插入的界面找到“文本框”选项。3、点击“文本框”的下拉按钮，在下拉菜单中点击“横排文本框(H)”进行横排格式的文。
没有选中复选框时，文本框提示“未选择兴趣。。。”
选中复选框时，文本框中显示复选框中的内容，并用“，”隔开。
取消复选框时，文本框中相应的内容取消。
是不是感觉还不错，见过很多这方面的例子？
接下来我给大家详细讲解一下，如何实现。
一、分析
需要实现的效果如上所述：
没有选中复选框时，文本框提示“未选择兴趣。。。”；
选中复选框时，文本框中显示复选框中的内容，并用“，”隔开；
取消复选框时，文本框中相应的内容取消。
二、元件准备
从元件库中拖一个复选框，命名“checkbox”，一个多行文本框，命名“hobbyingput”接下来我们开始实现逐步实现上述功能。
word插入文本框 方法 一 步骤一：word插入文本框方法图1 步骤二：当然，也可以绘制竖排文本 word插入文本框方法图2 word插入文本框方法二：步骤：可以选择横向与竖向文本框 word插入文本框方法图3 word插入。
三、交互
使用快捷键“Alt+I+X+H”可以插入横向文本框；使用快捷键“Alt+I+X+V”可以插入纵向文本框。
1. 没有选中复选框时，文本框提示“未选择兴趣。。。”
这个很容易实现我们只需给文本框添加提示文字“未选择兴趣。。。”，并影藏边框。
2. “选中复选框时，文本框中显示复选框中的内容，并用“，”隔开”
浏览器预览时：
我们在文本框“文本改变时”设置文本与“bobbyinput”用[[This.text.replace(‘未选择兴趣。。。’，”)]]实现，我们把当前文本框中的文本进行替换，公式中的函数replace能够对文本内容进行替换，第一个参数是被替换的内容，第二个参数是替换后的内容。
浏览器预览：
我们成功的把文本框中的“提示文字”取消了，但是又有了一个新的问题，“，”出现在了“bobbyinput”文本框的前面，这明显也不是我们想要的，这个问题我们先放下，后面再集中解决，我们先解决“复选框取消时，文本框中相应的内容取消”。
3. “取消复选框时，文本框中相应的内容取消”
这里我刚开始给“this.text”也添了“ ” ”，但是浏览器预览发现并不能达到效果，我理解应该是“变量或者函数”直接使用，不用添加‘’，但是使用文本，或者符号需要添加‘’。
1、在电脑桌面找到需要插入文本框的word文档，双击打开word文档。2、在打开的word文档的任务栏中选择插入选项，进入插入界面。3、在插入界面选择文本框选项，点击文本框下方的下拉按钮，打开下拉菜单。4、在打开的下拉菜单中选择。
浏览器预览：
咦！好像实现了哦。但是又有一个新问题，复选框文本是不见了，但是“，”仍然存在，而且每选中一次，取消一次，就会多一个“，”。
好了，现在做到这里我们需要将复选框多复制几个，再到浏览器预览，发现了几个问题，也就是我们现在所遇到的问题。
（1）中间有两个或者更多 “，”存在
（2）最前面有一个“，”存在
（3）最后面有一个“，”存在
接下来我们一 一分析，重点也来了。
我们先解决“中间有两个或者更多 “，”存在”，因为出现这个问题的根本原因就是我们向文本框添加了内容，导致它的文本发生了改变。所以，我们在前面文本框“文本改变时”添加例“case2”添加条件。
如果文本框中包含“，，”替换为“，”。
浏览器预览，问题解决。
函数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，输入两个参数时，第一个参数为截取的起始位置，第二个参数为截取的数量。
通过这样的操作，我们就能舍弃掉文本的最后一位。
就是从最面开始截取，如果文本最后存在“，”那么截取位置就是从0到文本倒数第二位。
浏览器预览：
到这里，我们全部实现了复选框选中时文本内容添加到文本框，花了两个小时写了这篇文章，虽然花了不少时间，但是写出了之后还是挺满足的，这样做主要是：
自己再次动手，熟练了一遍；
分享给大家，我们一起学习，一起进步。
以后，我还会写关于Axure的小文章，欢迎大家交流学习
原型预览：
源文件下载： 密码：ojru
题图来自Unsplash，基于CC0协议
