JS和后台获取复选框(checkbox)选中项后的文本内容

最新推荐文章于 2021-10-30 15:24:50 发布

原创最新推荐文章于 2021-10-30 15:24:50 发布 · 1.2w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#java #表单 #html #checkbox #function

IT海洋——Java 专栏收录该内容

15 篇文章

订阅专栏

这篇博客介绍了如何在JavaScript中获取HTML复选框(checkbox)选中项的文本内容，包括单选与全选功能的实现。同时，它探讨了在后台Java中如何通过getParameterValues方法获取选中checkbox的值，以及当value值动态且需要获取额外值（如uname）时，如何利用隐藏input字段并进行后台处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    
 <script language=javascript>


//单选与全选的判断
function check(e, allName){
       var all = document.getElementsByName(allName)[0];    //获取全选复选框
       if(!e.checked){
           //没被选中全选复选框置为false;
           all.checked = false;
       } else {
           //选中，遍历数组
           var aa = document.getElementsByName(e.name);
           for (var i=0; i<aa.length; i++)
           //只要数组中有一个没有选中返回。假如所有的都是选中状态就将全选复选框选中;
           if(!aa[i].checked) return;    
           all.checked = true;  
       }
   }


//复选框的选择
function checkSub(e, itemName){
  var aa = document.getElementsByName(itemName);
  for (var i=0; i<aa.length; i++){
   aa[i].checked = e.checked;
}
}


//发送前检查
function checkItem(itemName){
     var aa = document.getElementsByName(itemName);
     var flag = true;
     for (var i=0; i<aa.length; i++){
         if(aa[i].checked){
             alert(r[i].value+","+r[i].nextSibling.nodeValue);
             flag = false;
         }
         
     }
     if(flag){
         alert("至少选一个");
         return true;
     }else{
         sendDBs();
     } 
}


var tisub = "first";
function sendDBs(){
   if("first"==tisub){
      tisub = "other";
  document.all.myform.action="<%=path %>/SendDBction.do?method=sendDB";
  document.all.myform.submit();
}
}




</script>






</head>
<body>
 <form id="myform" name="myform" method="post" id="myform" action="" >


<input name="id"  type="checkbox" onclick="check(this, 'checkAll')" value="1"/> 开


<input name="id"  type="checkbox" onclick="check(this, 'checkAll')" value="2"/> 开


<input name="id"  type="checkbox" onclick="check(this, 'checkAll')" value="3"/> 心


<input name="id"  type="checkbox" onclick="check(this, 'checkAll')" value="4"/> 心


<input name="chkAll" type="checkbox" id="chkAll" onclick="CheckAll(this,'id')" value=""/>
全选




<input type="button" onclick="aa('id')" value="选中值"/>




  
</form>




</body>
</html>
</body>
</html>

后台获取checkbox的值，只需一句代码：
String[] st = request.getParameterValues("id");即可得到String类型的数组。

若是表单的value值是动态的，并且后台希望获得两个动态值的话，
也即表单<input>如下：<input name="id" type="checkbox" onclick="check(this, 'checkAll')" value="<%=uid%>">
String[] st = request.getParameterValues("id")在后台只能获取uid的数组，现在还想获取uname值，怎么办呢？这是可以再加一个<input />，比如
<input name="id" type="checkbox" onclick="check(this, 'checkAll')" value="<%=uid%>"/> 心
<input name="name" type="hidden" onclick="check(this, 'checkAll')" value="<%=uname%>"/> （隐藏input）
提交表单时<input type="button" onclick="aa('id','name')" value="选中值"/>
在后台
String[] st1 = request.getParameterValues("id");
String[] st2 = request.getParameterValues("name");