jquery获取复选框的值

最新推荐文章于 2022-01-08 11:07:39 发布

日光微暖〆夏亦凉

最新推荐文章于 2022-01-08 11:07:39 发布

阅读量434

点赞数

web端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

html代码：

<html>    
     <head>    
         <title>JS获取复选框被选中的值</title>    
     </head>    
     <body>    
         <input type="checkbox" name="test" value="0" />0      
         <input type="checkbox" name="test" value="1" />1      
         <input type="checkbox" name="test" value="2" />2      
         <input type="checkbox" name="test" value="3" />3      
         <input type="checkbox" name="test" value="4" />4      
         <input type="checkbox" name="test" value="5" />5      
         <input type="checkbox" name="test" value="6" />6      
         <input type="checkbox" name="test" value="7" />7      
         <input type="button" οnclick="chk()" value="提  交" />    
     </body>    
</html>

js代码：

function chk(){    
  var obj=document.getElementsByName('test');  //选择所有name="'test'"的对象，返回数组    
  //取到对象数组后，我们来循环检测它是不是被选中    
  var s='';    
  for(var i=0; i<obj.length; i++){    
    if(obj[i].checked) s+=obj[i].value+',';  //如果选中，将value添加到变量s中    
  }    
  //那么现在来检测s的值就知道选中的复选框的值了    
  alert(s==''?'你还没有选择任何内容！':s);    
}    
    
function jqchk(){  //jquery获取复选框值    
  var chk_value =[];    
  $('input[name="test"]:checked').each(function(){    
   chk_value.push($(this).val());    
  });    
  alert(chk_value.length==0 ?'你还没有选择任何内容！':chk_value);    
}

对checkbox的其他几个操作：

1. 全选
2. 取消全选
3. 选中所有奇数
4. 反选
5. 获得选中的所有值

js代码：

$("document").ready(function(){  
    $("#btn1").click(function(){  
        $("[name='checkbox']").attr("checked",'true');//全选  
    })  
    $("#btn2").click(function(){  
        $("[name='checkbox']").removeAttr("checked");//取消全选  
    })  
    $("#btn3").click(function(){  
        $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数  
    })  
    $("#btn4").click(function(){  
        $("[name='checkbox']").each(function(){//反选  
            if($(this).attr("checked")){  
                $(this).removeAttr("checked");  
            }  
            else{  
                $(this).attr("checked",'true');  
            }  
        })  
    })  
    $("#btn5").click(function(){//输出选中的值  
        var str="";  
        $("[name='checkbox'][checked]").each(function(){  
            str+=$(this).val()+"/r/n";  
            //alert($(this).val());  
        })  
        alert(str);  
    })  
})