关于复选框全选，全不选以及使用按钮传值

最新推荐文章于 2020-12-04 11:04:51 发布

原创最新推荐文章于 2020-12-04 11:04:51 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

Java编程专栏收录该内容

12 篇文章

订阅专栏

本文介绍了两种通过JavaScript实现复选框全选及选中值传递的方法：一种是使用字符串累加并用逗号隔开的方式；另一种是利用数组收集选中项值。这两种方法均可有效地将选中的复选框值传递到后台。

在复选框全选，以及选其中的几个进行传值，有以下思路，把每个复选框的值，使用字符串累加，用逗号将其隔开代码如下

function checkAll() {
   var id = document.getElementById("all");
   var name = document.getElementsByName("checkbox");
   if(id.checked==true){
      if(name.length){
         for(var i=0;i<name.length;i++){
            name[i].checked = true;
         }
      }
      name.chcked=true;
   }else{
      if(name.length){
         for(var i=0;i<name.length;i++){
            name[i].checked = false;
         }
      }
   }
}
这段代码是复选框全选全不选
function mycheckbox() {
   var str = "";
   var i=0;
   $("input[name='checkbox']:checkbox").each(function () {
      if ($(this).is(':checked')) {
         str+=$(this).val()+",";
         i++;
      }
   });
   if(i==0){
      layer.msg("请选择需要合并的会议",{icon:0});
   } else  if(i==1){
      layer.msg("合并会议至少选择两个以上",{icon:0});
   }else {
      window.location.href="${ctx}/meetingIn/merger?str="+str;
   }

这段是将选中的复选框的值传到后台。

这是第二种方法

<input type="checkbox" name="test" value="1"/><span>1</span>
<input type="checkbox" name="test" value="2"/><span>2</span>
<input type="checkbox" name="test" value="3"/><span>3</span>
<input type="checkbox" name="test" value="4"/><span>4</span>
<input type="checkbox" name="test" value="5"/><span>5</span>
<input type='button' value='提交' onclick="fun()"/>

function fun(){
    obj = document.getElementsByName("test");
    check_val = [];
    for(k in obj){
        if(obj[k].checked)
            check_val.push(obj[k].value);
    }
    alert(check_val);
//在这里可以将选中的复选框的值传给后台
window.location.href="${ctx}/meetingIn/merger?str="+check_val;

}