项目中我做修改用户个人资料的时候，有一个需求是帮助人员的帮助类型如图下所示：
当初想如果是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>
接下来是如何把要选定的某项存入数据库中
- <span style="font-size:18px;"><script>
- function GetZone() {
- //获取input所在div的对象
- var ob = document.getElementById("div1");
- //获取div中所用的IUPUT控件集合
- var col = div1.getElementsByTagName("INPUT");
- //定义一个变量并初始化为空
- var str = "";
- var count = 0;
- //循环遍历，判断INPUT是否选中
- for (var i = 0 ; i < col.length; i++) {
- if (col[i].checked == true) {
- count++;
- if (count == 1) {//当是一个值得时候，直接把选中的值赋给字符串
- str += col[i].value;
- }
- else {
- str += "/" + col[i].value;//多个被选中的时候，需要把选定的值不断的拼接
- }
- //str+=col[i].value+"/";
- }
- }
- document.getElementById("zonestr").value = str;//把选择完后的字符串给一个隐藏空间以便向后台传送
- }
- </script></span>
这样通过提交表单的方法就可以把界面上的数据提交到后台，可以轻松的写入到数据库中了
核心内容：
对如何读取并判断数据并打上对勾呢？由于是基于easyui框架，需要通过Json数据的传送
- <span style="font-size:18px;"> <script>
- $('#sheyuan').form('submit', {
- url: 'ShowMember.ashx',//调用的一般处理程序
- onSubmit: function () {
- },
- dataType: "json",
- success: function (data) {//返回的数据在data中
- var NowLivecountry = eval("(" + data + ")").NowLivecountry//json为接收的后台返回的数据，拿出我存放界面上值得字段；
- var list = NowLivecountry.split('/');//把数据给拆分并放到list里面
- //获取input所在div的对象
- var ob = document.getElementById("div1");
- //获取div中所用的IUPUT控件集合
- var col = div1.getElementsByTagName("INPUT");
- var str = "";
- var count = 0;
- //通过页面上的循环获取的值与后台传送过来放到list中的数据一一比对，如果和界面的内容一致的就可以选择，让其打上对勾
- for (var obj in list) {
- for (i = 0; i < col.length; i++) {//界面上input中的值
- for (j = 0; j <= list.length; j++)//list中的值
- {
- if (col[i].value == list[j])//比较是否内容相等，如果一致就在界面上打上对勾
- {
- col[i].checked = true//是combox选中，打上对勾
- }
- }
- }
- }
- }
- });</span>
Json中返回的数据格式：
存入list中的数据结构，对于这样的内容如果理解了，整体理解很简单了。
重点!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
下面有一种更好理解的方法,使用freemarker 判断选中的一个或者多个直接使用split方法进行截取字符串并用,进行拼接存入数据库或者input框中
$(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);
}
});在反显时进行判断并给checkbox赋值以达到反显的效果
<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>
</script>
</div>
</div>
</div>