需求说明

        最近项目有一个需求，选择项目设计的系统，点击input框弹出一个弹框，弹框内是涉及的系统，点击勾选框后把已选择的系统展示在弹框内容顶部，如想撤销选择可在弹框上面已选处点击删除，或者直接取消勾选。确定好选择的系统后点击确定按钮，内容将显示在最开始的input框内，每一选择之间用逗号隔开，鼠标划过这个input框会有内容的title。说的比较繁琐，看图比较清晰。

实现步骤

一、准备弹窗

         点击弹出弹框就不细说了，需要说明的是弹窗内所选择系统的html结构。

         下图是做原型时静态的HTML结构。

    这是后台传真实数据的jsp

二、接下来就是重点内容，用js实现点击勾选框后把已选择的系统展示在弹框内容顶部，如想撤销选择可在弹框上面已选处点击删除，或者直接取消勾选框。

    首先，准备一个空的div在弹窗顶部，用于存放已选择的内容。

    其次，实现上述功能的js思路及代码，其中核心就是如何将勾选框和上面的已选择的内容关联上（红框部分）。

三、点击确定按钮后将已选择的系统同步到一开始的input框中，内容用逗号隔开，鼠标划过时会有内容的title。

    涉及系统的html

    实现的js代码