本文是作者在阅读了相关文章后，对于复选框选中时可以将选项添加到文本框中的一些理解，来与大家分享，一起来看看~

昨天阅读了小楼老师一篇文章，关于复选框选中时可以将选项添加到文本框中，觉得很实用，所以想用自己的理解分享出来，直接上图说明。

没有选中复选框时，文本框提示“未选择兴趣。。。”

选中复选框时，文本框中显示复选框中的内容，并用“，”隔开。

取消复选框时，文本框中相应的内容取消。

是不是感觉还不错，见过很多这方面的例子？

接下来我给大家详细讲解一下，如何实现。

一、分析

需要实现的效果如上所述：

1. 没有选中复选框时，文本框提示“未选择兴趣。。。”；
2. 选中复选框时，文本框中显示复选框中的内容，并用“，”隔开；
3. 取消复选框时，文本框中相应的内容取消。

二、元件准备

从元件库中拖一个复选框，命名“checkbox”,一个多行文本框，命名“hobbyingput”接下来我们开始实现逐步实现上述功能。

三、交互