checkbox多选框拼接成字符串到后台接收存入数据库

    项目中我做修改用户个人资料的时候，有一个需求是帮助人员的帮助类型如图下所示：

       当初想如果是asp.net控件的话应该很简单实现，如果不是基于easyUI框架那就太简单了，现在是受框架的限制与是前端html控件，所以还是会稍微多转化一下，

 

前提

         这个是个人资料的修改，需要如果用户已经选择某项的话，需要加载时打上对勾：如图所示

思路

        对于数据的存储考虑过可以存放到多个字段里面，这样操作起来方便，现在通过查询资料是可以把这些只要是选中的某项都可以拼接成字符串存入到数据库中的一个字段中，读取的时候需要先把这些信息读取出来，再通过对字符串的拆分与读取，判断是否某些值被选择，这样大致的思路就有了，现在我们来实战：

实现过程

首先定义的是一个隐藏空间为了存取数据向后台传送数据

<span style="font-size:18px;"><input id="zonestr" name="zonestr" type="text" style="display: none" />span>

 

由于下面的复选框度在一个div里面存放，所以调用的是对div的点击事件：

<span style="font-size:18px;"><div id="div1" style="border: 1px solid #D1D1D1" onclick="javascript:GetZone()">span>

 

接下来是如何把要选定的某项存入数据库中

"font-size:18px;">  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">        <span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">function</span><span style="border:none;background-color:inherit;"> GetZone() {  </span></span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">            <span class="comment" style="border:none;color:rgb(0,130,0);background-color:inherit;">//获取input所在div的对象</span><span style="border:none;background-color:inherit;">  </span></span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">            <span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">var</span><span style="border:none;background-color:inherit;"> ob = document.getElementById(</span><span class="string" style="border:none;color:#0000FF;background-color:inherit;">"div1"</span><span style="border:none;background-color:inherit;">);  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">            <span class="comment" style="border:none;color:rgb(0,130,0);background-color:inherit;">//获取div中所用的IUPUT控件集合</span><span style="border:none;background-color:inherit;">  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">            <span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">var</span><span style="border:none;background-color:inherit;"> col = div1.getElementsByTagName(</span><span class="string" style="border:none;color:#0000FF;background-color:inherit;">"INPUT"</span><span style="border:none;background-color:inherit;">);  </span></span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">            <span class="comment" style="border:none;color:rgb(0,130,0);background-color:inherit;">//定义一个变量并初始化为空</span><span style="border:none;background-color:inherit;">  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">            <span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">var</span><span style="border:none;background-color:inherit;"> str = </span><span class="string" style="border:none;color:#0000FF;background-color:inherit;">""</span><span style="border:none;background-color:inherit;">;  </span></span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">            <span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">var</span><span style="border:none;background-color:inherit;"> count = 0;  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">            <span class="comment" style="border:none;color:rgb(0,130,0);background-color:inherit;">//循环遍历，判断INPUT是否选中</span><span style="border:none;background-color:inherit;">  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">            <span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">for</span><span style="border:none;background-color:inherit;"> (</span><span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">var</span><span style="border:none;background-color:inherit;"> i = 0 ; i < col.length; i++) {  </span></span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                <span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">if</span><span style="border:none;background-color:inherit;"> (col[i].checked == </span><span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">true</span><span style="border:none;background-color:inherit;">) {  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                    count++;  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                    <span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">if</span><span style="border:none;background-color:inherit;"> (count == 1) {</span><span class="comment" style="border:none;color:rgb(0,130,0);background-color:inherit;">//当是一个值得时候，直接把选中的值赋给字符串</span><span style="border:none;background-color:inherit;">  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                        str += col[i].value;  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                    }  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                    <span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">else</span><span style="border:none;background-color:inherit;"> {  </span></span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                        str += <span class="string" style="border:none;color:#0000FF;background-color:inherit;">"/"</span><span style="border:none;background-color:inherit;"> + col[i].value;</span><span class="comment" style="border:none;color:rgb(0,130,0);background-color:inherit;">//多个被选中的时候，需要把选定的值不断的拼接</span><span style="border:none;background-color:inherit;">  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                    }  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                    <span class="comment" style="border:none;color:rgb(0,130,0);background-color:inherit;">//str+=col[i].value+"/";</span><span style="border:none;background-color:inherit;">  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                }  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">            }  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">            document.getElementById(<span class="string" style="border:none;color:#0000FF;background-color:inherit;">"zonestr"</span><span style="border:none;background-color:inherit;">).value = str;</span><span class="comment" style="border:none;color:rgb(0,130,0);background-color:inherit;">//把选择完后的字符串给一个隐藏空间以便向后台传送</span><span style="border:none;background-color:inherit;">  </span></span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">        }  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">

这样通过提交表单的方法就可以把界面上的数据提交到后台，可以轻松的写入到数据库中了

核心内容：

              对如何读取并判断数据并打上对勾呢？由于是基于easyui框架，需要通过Json数据的传送

 

 

"font-size:18px;">   </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">        $(<span class="string" style="border:none;color:#0000FF;background-color:inherit;">'#sheyuan'</span><span style="border:none;background-color:inherit;">).form(</span><span class="string" style="border:none;color:#0000FF;background-color:inherit;">'submit'</span><span style="border:none;background-color:inherit;">, {  </span></span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">            url: <span class="string" style="border:none;color:#0000FF;background-color:inherit;">'ShowMember.ashx'</span><span style="border:none;background-color:inherit;">,</span><span class="comment" style="border:none;color:rgb(0,130,0);background-color:inherit;">//调用的一般处理程序</span><span style="border:none;background-color:inherit;">  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">            onSubmit: <span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">function</span><span style="border:none;background-color:inherit;"> () {  </span></span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">            },  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">            dataType: <span class="string" style="border:none;color:#0000FF;background-color:inherit;">"json"</span><span style="border:none;background-color:inherit;">,  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">            success: <span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">function</span><span style="border:none;background-color:inherit;"> (data) {</span><span class="comment" style="border:none;color:rgb(0,130,0);background-color:inherit;">//返回的数据在data中</span><span style="border:none;background-color:inherit;">  </span></span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                <span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">var</span><span style="border:none;background-color:inherit;"> NowLivecountry = eval(</span><span class="string" style="border:none;color:#0000FF;background-color:inherit;">"("</span><span style="border:none;background-color:inherit;"> + data + </span><span class="string" style="border:none;color:#0000FF;background-color:inherit;">")"</span><span style="border:none;background-color:inherit;">).NowLivecountry</span><span class="comment" style="border:none;color:rgb(0,130,0);background-color:inherit;">//json为接收的后台返回的数据，拿出我存放界面上值得字段；</span><span style="border:none;background-color:inherit;">  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                <span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">var</span><span style="border:none;background-color:inherit;"> list = NowLivecountry.split(</span><span class="string" style="border:none;color:#0000FF;background-color:inherit;">'/'</span><span style="border:none;background-color:inherit;">);</span><span class="comment" style="border:none;color:rgb(0,130,0);background-color:inherit;">//把数据给拆分并放到list里面</span><span style="border:none;background-color:inherit;">  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                 </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                 </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                <span class="comment" style="border:none;color:rgb(0,130,0);background-color:inherit;">//获取input所在div的对象</span><span style="border:none;background-color:inherit;">  </span></span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                <span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">var</span><span style="border:none;background-color:inherit;"> ob = document.getElementById(</span><span class="string" style="border:none;color:#0000FF;background-color:inherit;">"div1"</span><span style="border:none;background-color:inherit;">);  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                <span class="comment" style="border:none;color:rgb(0,130,0);background-color:inherit;">//获取div中所用的IUPUT控件集合</span><span style="border:none;background-color:inherit;">  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                <span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">var</span><span style="border:none;background-color:inherit;"> col = div1.getElementsByTagName(</span><span class="string" style="border:none;color:#0000FF;background-color:inherit;">"INPUT"</span><span style="border:none;background-color:inherit;">);  </span></span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                <span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">var</span><span style="border:none;background-color:inherit;"> str = </span><span class="string" style="border:none;color:#0000FF;background-color:inherit;">""</span><span style="border:none;background-color:inherit;">;  </span></span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                <span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">var</span><span style="border:none;background-color:inherit;"> count = 0;  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                <span class="comment" style="border:none;color:rgb(0,130,0);background-color:inherit;">//通过页面上的循环获取的值与后台传送过来放到list中的数据一一比对，如果和界面的内容一致的就可以选择，让其打上对勾</span><span style="border:none;background-color:inherit;">  </span></span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                <span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">for</span><span style="border:none;background-color:inherit;"> (</span><span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">var</span><span style="border:none;background-color:inherit;"> obj </span><span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">in</span><span style="border:none;background-color:inherit;"> list) {  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                    <span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">for</span><span style="border:none;background-color:inherit;"> (i = 0; i < col.length; i++) {</span><span class="comment" style="border:none;color:rgb(0,130,0);background-color:inherit;">//界面上input中的值</span><span style="border:none;background-color:inherit;">  </span></span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                        <span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">for</span><span style="border:none;background-color:inherit;"> (j = 0; j <= list.length; j++)</span><span class="comment" style="border:none;color:rgb(0,130,0);background-color:inherit;">//list中的值</span><span style="border:none;background-color:inherit;">  </span></span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                        {  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                            <span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">if</span><span style="border:none;background-color:inherit;"> (col[i].value == list[j])</span><span class="comment" style="border:none;color:rgb(0,130,0);background-color:inherit;">//比较是否内容相等，如果一致就在界面上打上对勾</span><span style="border:none;background-color:inherit;">  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                            {  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                                col[i].checked = <span class="keyword" style="border:none;color:rgb(0,102,153);background-color:inherit;font-weight:bold;">true</span><span class="comment" style="border:none;color:rgb(0,130,0);background-color:inherit;">//是combox选中，打上对勾</span><span style="border:none;background-color:inherit;">  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                            }  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                        }  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                    }  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">                }  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);background-color:rgb(248,248,248);line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">            }  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:#000000;background-color:inherit;">        });</span>  </span></li> 
   </ol> 
  </div> 
  <p style="background-color:rgb(255,255,255);"><span style="font-size:18px;"><br> </span></p> 
  <p style="background-color:rgb(255,255,255);"><span style="font-size:18px;">Json中返回的数据格式：</span></p> 
  <p style="background-color:rgb(255,255,255);"><span style="font-size:18px;"><a href="http://img.e-com-net.com/image/info8/97d31d00e465474da14bee08e16273af.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/97d31d00e465474da14bee08e16273af.jpg" alt="" width="650" height="92"></a><br></span></p> 
  <p style="background-color:rgb(255,255,255);"><span style="font-size:18px;"><br></span></p> 
  <p style="background-color:rgb(255,255,255);"><span style="font-size:18px;">存入list中的数据结构，<span>对于这样的内容如果理解了，整体理解很简单了。</span></span></p> 
  <p style="background-color:rgb(255,255,255);"><span style="font-size:18px;"><br></span></p> 
  <p style="background-color:rgb(255,255,255);"><span style="font-size:18px;"><a href="http://img.e-com-net.com/image/info8/e73453ef3e044cdbbf830155efe17f2b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e73453ef3e044cdbbf830155efe17f2b.jpg" alt="" width="379" height="86"></a></span></p> 
  <p style="background-color:rgb(255,255,255);"><span style="font-size:18px;"><br></span></p> 
  <p style="background-color:rgb(255,255,255);">重点!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</p> 
  <p style="background-color:rgb(255,255,255);"><br></p> 
  <p style="background-color:rgb(255,255,255);">下面有一种更好理解的方法,使用freemarker 判断选中的一个或者多个直接使用split方法进行截取字符串并用,进行拼接存入数据库或者input框中</p> 
  <pre><code class="language-javascript">$(function(){
				//复选框
				$("#checkbox").find(".control span").click(function(){
					if($(this).hasClass("curr")){
						$(this).removeClass("curr");
					}else{
						$(this).addClass("curr");
						var vals ="";
		    			$(".checkbox").each(function(){
		    				var type = $(this).hasClass("curr");
		    				if(type){
			    				var values=$(this).attr("data-id");
			    				if(values != null && values!=''){
			    					if(vals != null && vals!=''){
			    						vals = vals+","+values 
			    					}else{
			    						vals = values;
			    					}
			    				}	    				
		    					
		    				}
		    			});	    
		    			$("#consult").val(vals);
					}
				});</code></pre> 
  <br>        在反显时进行判断并给checkbox赋值以达到反显的效果 
  <pre><code class="language-javascript"><div class="form-term clearfix" id="checkbox">
									<div class="lable">咨询类型：</div>
									<div class="control">
										<div class="clearfix">	
						                        <span class="checkbox " data-id="AK01-001">工业云平台</span>
												<span class="checkbox  "data-id="AK01-002">专业平台</span>
												<span class="checkbox  "data-id="AK01-003">经营管理</span>
												<span class="checkbox  "data-id="AK01-004">智能制造</span>
											<input type="hidden"  id="consult" name="consultingtypename" placeholder="" class="input" value='${(info.consultingtypename)!}' >
											<script type="text/javascript">
											<#if (info.consultingtypename)??> 
						                    <#list info.consultingtypename?split(",") as consultingtypename>  
							                    <#if consultingtypename == 'AK01-001'>
							                    $(".clearfix .checkbox").eq(0).addClass("curr");
							                    </#if>						
							                    <#if consultingtypename == 'AK01-002'>
							                    $(".clearfix .checkbox").eq(1).addClass("curr");
							                    </#if>						
							                    <#if consultingtypename == 'AK01-003'>
							                    $(".clearfix .checkbox").eq(2).addClass("curr");
							                    </#if>						
							                    <#if consultingtypename == 'AK01-004'>
							                    $(".clearfix .checkbox").eq(3).addClass("curr");
							                    </#if>						
											 </#list>
 					                      </#if>