我们平时经常会遇到对html中的复选框的操作,这篇主要介绍通过jquery操作复选框的一些方法,仅供参考。

1、获取checkbox选中的值。

html代码如下:

<html> 
  <head>
    <title>jquery操作复选框</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" id="btn1" value="全选"> 
    <input type="button" id="btn2" value="取消全选"> 
    <input type="button" id="btn3" value="选中所有奇数"> 
    <input type="button" id="btn4" value="反选"> 
    <input type="button" id="btn5" value="获得选中的所有值"> 
  </body> 
</html>

js代码如下:

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

对checkbox的其他几个操作

1、全选
2、取消全选
3、选中奇数
4、反选
5、输出选中的值

$("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(str);
    })
  })

One Comment

Leave a comment