JavaScript多选框checkbox传递

工作中遇到的多选框传递问题,实际上需要将多选框用js拼成一个传,作为string传递过去,需要在表单中加一个隐藏的值,回写的时候,再用js解析此串,然后给多选框赋值,用到代码如下:
//将多选框拼串

function getCheckboxStrNew(objName){ 
    var objList  = document.getElementsByName(objName);
	var returnStr = '';
	for(var i = 0; i < objList.length; i++)
	{ 
        var obj = objList[i]; 
		if(obj.type=='checkbox' && obj.checked)
		{ 
            if(returnStr == '')
			{
                 returnStr = '\''+obj.value+'\'';
			}
			else
			{
				returnStr = returnStr+',\''+obj.value+'\'';
			}//end if/else
		}//if(obj.type=='checkbox' && obj.checked)
	}//end for

	return returnStr;
}


//返回来串设置多选框值

//复选框判断是否选中
function checkboxJudge(objName,valueListStr){ 
    var objList  = document.getElementsByName(objName);
	for(var i = 0; i < objList.length; i++)
	{ 
        var obj = objList[i]; 
		if(obj.type=='checkbox' && valueListStr.indexOf(obj.value) > -1)
		{  
            obj.checked = true;
		}
	}
} 
 

//jsp代码

 <tr bgcolor="f5f5f5" class="css" >  
    <td width="15%"  align="right" bgcolor="f5f5f5" rowspan="3">是否输出
    <INPUT οnclick="selectAll();" id="Checkbox4" type="checkbox" name="Checkbox4" value="01">全选
    
    </td> 
    <td  class="item6" align="left"  colspan=3> 
	  <input name="statusCheck" type="checkbox" class="checkbox" value="01">选项1
	<!--   <input name="statusCheck" type="checkbox" class="checkbox" value="02">选项2  
	  <input name="statusCheck" type="checkbox" class="checkbox" value="03">选项3  
	  --> 
	  </td>
	  </tr>
	  <tr bgcolor="f5f5f5" class="css" >
	    <td  class="item6" align="left"  colspan=3> 
	  <input name="statusCheck" type="checkbox" class="checkbox" value="04">选项4  
	  <input name="statusCheck" type="checkbox" class="checkbox" value="05">选项5  
	  <input name="statusCheck" type="checkbox" class="checkbox" value="06">选项6 
	  <input name="statusCheck" type="checkbox" class="checkbox" value="07">选项7
	  <input name="statusCheck" type="checkbox" class="checkbox" value="08">选项8
      <!--  <input name="statusCheck" type="checkbox" class="checkbox" value="09">选项9
	 --> 
	  </td>
	  </tr>
	  <tr>
	  	    <td  class="item6" align="left"  colspan=3> 
	  <input name="statusCheck" type="checkbox" class="checkbox" value="10">选项10
	  <input name="statusCheck" type="checkbox" class="checkbox" value="11">选项11
	  <input name="statusCheck" type="checkbox" class="checkbox" value="12">选项12
	  <input name="statusCheck" type="checkbox" class="checkbox" value="13">选项13
    </td>   
    
  </tr>
 
<script> 

checkboxJudge('statusCheck','<bean:write name="OrderQueryForm" property="orderQueryConditionBO.printList"/>');
checkboxJudge('Checkbox4','<bean:write name="OrderQueryForm" property="orderQueryConditionBO.allSelect"/>');

</script>


//submit时js



function search(){  
  
    
    var statusStrList = getCheckboxStrNew('statusCheck');
	document.OrderQueryForm.elements("orderQueryConditionBO.printList").value = statusStrList;
    document.OrderQueryForm.actionFlag.value="";
    document.OrderQueryForm.submit(); 
}

//要加一个隐藏表单,放拼好的串
<html:hidden name="OrderQueryForm" property="orderQueryConditionBO.printList"/> 
//多选按钮的设定
function selectAll(){
   //  alert('ww');
    if(window.document.OrderQueryForm.allSelect.checked==true){
       var ss=window.document.OrderQueryForm.statusCheck;
       for(i=0;i<ss.length;i++){
           var chk_ss=ss[i];
           chk_ss.checked=true;
       }
    }else{
       var ss1=window.document.OrderQueryForm.statusCheck;
       for(i=0;i<ss1.length;i++){
           var chk_ss1=ss1[i];
           chk_ss1.checked=false;
    }
   }
  }



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章