实现翻页或查询后保持复选框勾选状态

首先先梳理一下复选框的相关逻辑

当你看着每个选项的名字而勾选选项时，传入后台的一定是这些选项所对应的id（即唯一的标识符）。由于一个复选框的选项个数基本是不变的，在这个项目中所有的复选框的id和name都存入到了数据字典表中。一个项目中会有多个复选框，为了区分不同的复选框选项，数据字典表中一定会有一个字段用来区分不同的复选框。否则一号复选框中没准会出现二号复选框的选项。以我之前最长见到的复选框为例，当复选框随页面加载时，会从数据字典表查询出这个复选框的所有值（id和name 下面的的项目中成为dvalue和dname），将每个选项的这两个id和name封装成一个对象，再将这个复选框中所有已封装成对象的选项添加入集合list中，在控制层将list加入request带回到页面，在页面加载的时候利用jstl动态的生成复选框。要保存复选框的勾选状态，只需要将勾选的选项传回页面就可以了。
如下图所示（请记住这个样式，下面的复选框的代码就是这个样式）：

扯得有点远，回到正题。

那么我们要看一下，当时这个查询页面的jsp中复选框的代码。

<td align="right" nowrap>复选框:</td>      
        <td align="left">
            <input type="text" id="_mselect_text_fuxuankuang" name="_mselect_text_fuxuankuang" value="${fuxuankuangNames}" onClick='_mselect_doSelect("fuxuankuang");' size="30" class='mselect' readonly/>
            <div class='mselect_hideDiv' style='z-index:10;' id='_mselect_div_fuxuankuang' >
                <div class='mselect_tableDiv'>
                    <table>
                        <c:forEach items="${fuxuankuang}" var="vip">
                           <tr><td nowrap><input type='checkbox' name='fuxuankuang' value="${vip.dvalue}"/></td><td>${vip.dname}</td></tr>
                        </c:forEach>
                    </table>
                </div>
                <div><hr></div>
                <div align='right'><input type='button' value='确定' onClick='_mselect_hideSelect("fuxuankuang")'/></div>
            </div>
        </td>

接下来是这一段代码中所涉及到function的代码：

function _mselect_doSelect(mname){
    var selectDiv = document.getElementById("_mselect_div_"+mname);
    if(selectDiv.className=="mselect_showDiv"){
        _mselect_hideSelect(mname);
    }else{
        _mselect_showSelect(mname);
    }
}



function _mselect_hideSelect(mname){
    var selectDiv = document.getElementById('_mselect_div_'+mname);
    selectDiv.className="mselect_hideDiv";
    var selects = document.getElementsByName(mname);
    var showtext = "";
    for(i=0;i<selects.length;i++){
        if(selects[i].checked){
            showtext+=","+selects[i].parentNode.parentNode.cells[1].innerHTML
        }
    }
    if(showtext.length>1)showtext=showtext.substr(1);
    document.getElementById('_mselect_text_'+mname).value=showtext;
}

function _mselect_showSelect(mname){
        var selectDiv = document.getElementById("_mselect_div_"+mname);
        var t = document.getElementById("_mselect_text_"+mname);
        selectDiv.className="mselect_showDiv";
        var theight=t.style.height;
        var height=selectDiv.offsetHeight;
        var sheight=window.screen.availHeight-30;
        if(theight==0)theight=24;
        var ttop=_mselect_getTop(t);
        var tleft=_mselect_getLeft(t);
        selectDiv.style.left=tleft;
        if(document.body.offsetHeight-ttop-theight-height>0){
            selectDiv.style.top=ttop+theight;
        }else{
            selectDiv.style.top="0";
            selectDiv.style.zIndex = 100;
            selectDiv.style.height="300";
            selectDiv.style.overflow="auto";
        }
        if(selectDiv.style.width==0){
            selectDiv.style.width=selectDiv.offsetWidth;
            if(selectDiv.offsetWidth<t.offsetWidth){
                selectDiv.style.width=t.offsetWidth;
            }
        }

    }

在该项目中，点击查询或翻页时已经勾选的选项其实是能够传到控制层的，但从控制层返回到页面时，是需要将哪些选项已经勾选的情况传回到页面，这样才能保留住复选框选项的勾选状态。而原代码是没有这个过程的，这自然是无法保存勾选状态。

由于勾选了选项后，传入控制层的是这些勾选选项的dvalue，因此在控制层加入一个自己写的方法代码如下：

/**
 * 此方法根据勾选的dvalue查出所有的已勾选选项的对象
 * @param list        复选框所有的选项
 * @param attribute   勾选的选项
 * @param str         每个选项对应的dvalue 
 */
public void saveInfoForCheckBox(List<DataDictionary> list,String attribute,String[] str) {
    //声明集合用以承装勾选的选项
    List<DataDictionary> listChecked = new ArrayList<DataDictionary>();
    //遍历该复选框总所有的选项
    for (int i = 0; i < list.size(); i++) {
        //遍历str
        for (int j = 0; j < str.length; j++) {
            //判断勾选选项的dvalue 是否同复选框选项dvalue相同 若相同则将此对象装入集合
            if (str[j].equals(list.get(i).getDvalue())) {
                listChecked.add(list.get(i));
                break;  
            }
        }
    }
    //将勾选的选项集合封入request中 
    request.setAttribute(attribute, listChecked);
}

上面代码中的attribute对应下面的fuxuankuangChecked
现在已经看到了我们将勾选的选项重新传回了查询页面，那么判断哪些选项勾选的任务就要交由前台去实现了。我们将复选框的代码重新修改了一下：

<td align="right" nowrap>复选框:</td>
        <td align="left">
            <input type="text" id="_mselect_text_fuxuankuang" name="_mselect_text_fuxuankuang" value="${fuxuankuangNames}" onClick='_mselect_doSelect("fuxuankuang");' size="30" class='mselect' readonly/>
            <div class='mselect_hideDiv' style='z-index:10;' id='_mselect_div_fuxuankuang' >
                <div class='mselect_tableDiv'>
                    <table>
                        <c:forEach items="${fuxuankuang}" var="vip">
                            <c:if test="${fuxuankuangChecked!=null }">
                                <c:set var="fuxuankuangflag" value="0" scope="page"></c:set>
                                <c:forEach items="${fuxuankuangChecked}" var="v">
                                    <c:if test="${v.dvalue==vip.dvalue}">
                                        <c:if test="${fuxuankuangflag == 0}">
                                            <tr><td nowrap><input type='checkbox' name='fuxuankuang' value="${vip.dvalue}" checked/></td><td>${vip.dname}</td></tr>
                                        <c:set var="fuxuankuangflag" value="1" scope="page"></c:set>
                                        </c:if>
                                    </c:if>
                                    <c:if test="${vip.dvalue!=v.dvalue }"></c:if>
                                </c:forEach>
                                <c:if test="${fuxuankuangflag==0 }">
                                  <tr><td nowrap><input type='checkbox' name='fuxuankuang' value="${vip.dvalue}"/></td><td>${vip.dname}</td></tr>
                                </c:if>  
                           </c:if>
                           <c:if test="${fuxuankuangChecked==null }">
                              <tr><td nowrap><input type='checkbox' name='fuxuankuang' value="${vip.dvalue}"/></td><td>${vip.dname}</td></tr>
                           </c:if>
                        </c:forEach>
                    </table>
                </div>
                <div><hr></div>
                <div align='right'><input type='button' value='确定' onClick='_mselect_hideSelect("fuxuankuang")'/></div>
            </div>
        </td>

最后只需要在页面加载的function中添加上复选框确认勾选的方法即可。

function init(){
    _mselect_hideSelect("fuxuankuang");
}

这样就可以实现翻页或查询后复选框状态的保持功能了。
办法永远比问题多，以上只是实现复选框状态保持的一个思路。