checkBox多项选择

效果图：

<th>
                        安监管理类型：
                    </th>
                    <td>
                        <input type="button" id="SafManTypeName" name="SafManTypeName" value="请选择安监管理类型" onclick="selectSafMan()">
                        <div id="SafMan" style="position:absolute;z-index:1;width:500px;left:355px;top:24px;background:#3f419e;display:none;">
                            <div style="height: 8px;width: 8px;background: url('../images/yj1.jpg') no-repeat scroll left top transparent;font-size:0;line-height:0px;float:left;"></div>
                            <div style="height: 8px;width: 484px;font-size:0;line-height:0;float:left;"></div>
                            <div style="height: 8px;width: 8px;background: url('../images/yj2.jpg') no-repeat scroll right top transparent;font-size:0;line-height:0px;float:right;"></div>
                            <div style="width: 500px;height:22px;cursor:move;background:#3f419e">
                                <h1 style="float:left;font-size:14px;font-weight:bold;color:#fff;margin-left:8px;_margin-left:4px">安监管理类型：</h1>
                                <div style="float: right;margin-right:8px;_margin-right:4px;color:#fff;font-size:12px;">
                                    <a style="color:fff;" href="#" onclick="getSafManSelected();">[确定]</a>
                                    <a style="color:fff;" href="#" onclick="getSelectedClose();">[取消]</a>
                                </div>
                            </div>
                            <div style="border-left:#3f419e 2px solid;border-right:#3f419e 2px solid;background:#fff;">
                                <div style="padding:8px;width:496px;">
                                    <table cellspacing="0" cellpadding="0" border="0">                                        
                                        <tr>
                                        <s:iterator value="SafManTypeList" status="smt">
                                            <s:if test="(#smt.index+1)%3!=0">
                                                <td style="padding:1px 2px;*padding:0 2px;width:165px"> 
                                                    <label>
                                                        <input type="checkbox" name="recordCheckBox" value="<s:property value="option_key"/>" onclick="getChkBoxName(this,'<s:property value="option_val"/>');"><s:property value="option_val"/>
                                                    </label>
                                                </td>
                                                </s:if>
                                                <s:else>
                                                    <td style="padding:1px 2px;*padding:0 2px;width:165px"> 
                                                        <label>
                                                            <input type="checkbox" name="recordCheckBox" value="<s:property value="option_key"/>" onclick="getChkBoxName(this,'<s:property value="option_val"/>');"><s:property value="option_val"/>
                                                        </label>
                                                    </td></tr><tr>                                                
                                                </s:else>                                            
                                        </s:iterator>    
                                        </tr>                                    
                                    </table>
                                </div>
                            </div>
                            <div style="height: 8px;width: 8px;background: url('../images/yj3.jpg') no-repeat scroll left top transparent;font-size:0;line-height:0px;float:left;"></div>
                            <div style="height:6px;width:484px;background:#fff;border-bottom:#3f419e 2px solid;font-size:0;line-height:0;float:left;"></div>
                            <div style="height: 8px;width: 8px;background: url('../images/yj4.jpg') no-repeat scroll left top transparent;font-size:0;line-height:0px;float:left;"></div>                            
                        </div>    
                    </td>

javascript:

        function selectSafMan(){
            if($("SafMan").style.display!="block"){
                $("SafMan").style.display="block";
            }else{
                $("SafMan").style.display="none";
            }
        }    
        function getSelectedClose(){            
            $("SafMan").style.display="none";
        }        
        function getSafManSelected(){
            if(safList.length>0){
                $("SafManTypeName").value=safList.join("+");
            }else{
                $("SafManTypeName").value="请选择安监管理类型";
            }
            $("SafMan").style.display="none";
        }
        var safList=new Array();
        function getChkBoxName(ch,name){
            if(ch.checked==true){
                safList.push(name);
            }else{
                for(var i=0;i<safList.length;i++){
                    if(name==safList[i]){
                        safList.splice(i,1);
                    }
                }
            }
        }