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;
    }
   }
  }



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