js获得checkbox选中值及input后面的文本详解编程语言

js如何获得多个checkbox选中的值及input后面所跟的文本

<!doctype html> 
<html lang="en"> 
 <head> 
  <meta charset="UTF-8"> 
  <meta name="Author" content=""> 
  <meta name="Keywords" content=""> 
  <meta name="Description" content=""> 
  <title>验证js获得多个checkbox选中值及input后面所跟文本</title> 
   <script type="text/javascript"> 
       function clickBjjb() { 
	   var checkboxValue= new Array(); 
	   var checkboxText= new Array(); 
	   var checkboxStr=document.getElementsByName("bjjb");   
	   for(var i=0; i<checkboxStr.length; i++){ 
		if(checkboxStr[i].checked){ 
	            //alert(checkboxStr[i].value+","+checkboxStr[i].nextSibling.nodeValue); 
		    checkboxValue.push(checkboxStr[i].value); 
                    checkboxText.push(checkboxStr[i].nextSibling.nodeValue); 
		 } 
	    }  
	    //输出值和文本 
	     alert("checkboxValue:"+checkboxValue); 
             alert("checkboxText:"+checkboxText); 
           //把获得的数据转换为字符串传递到后台            
           checkboxValue=checkboxValue.toString(); 
         checkboxText=checkboxText.toString(); 
         window.location='某Action/netWorkingUpdate?checkboxValue='+checkboxValue+"&checkboxText="+checkboxText; 
 
  }  
</script>  
</head>  
<body>  
   <form id="checkboxform" method="post" action=""> 
    <input type="checkbox" name="bjjb" value="1">交通事故<br> 
    <input type="checkbox" name="bjjb" value="2">自然灾害<br> 
    <input type="checkbox" name="bjjb" value="3">恶劣天气<br> 
   <input type="checkbox" name="bjjb" value="4">严重违法行为<br> 
   <input type="checkbox" name="bjjb" value="5">路面损毁<br> 
  <input type="button" onclick="clickBjjb()" value="报警级别" /> 
 </form>  
</body> 
</html> 
 
 
 
 
 
 
 

后台获得参数为:

//获得的均为数组值。

String checboxValues=request.getParameter(“checboxValue”);

String checboxTexts=request.getParameter(“checboxText”);

//得到每个具体值

String checboxValue=checboxValues.split(“,”);

String checboxText=checboxTexts.split(“,”);

备注:

1:nextSibling是获得当前对象的下一个对象,nodeValue是返回一个节点的值

2:使用该方法必须保证文本值在input后面,否则checkboxStr[i].nextSibling.nodeValue获取不到文本值

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/11195.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论