checkbox复选框全选和取消全选实例代码

checkbox复选框全选和取消全选实例代码:
关于复选框的全选和不全选是非常常见的操作，本章节分享一段代码实例，能够实现多种选中和取消选中功能。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript">
$("document").ready(function(){
  $("#all").click(function(){   
    if(this.checked)
    {   
      $("input[name='checkbox']").each(function(){this.checked=true;});
      $("#btn1").attr("value","反选");   
    }
    else
    {   
      $("input[name='checkbox']").each(function(){this.checked=false;});   
      $("#btn1").attr("value","全选"); 
    }   
  }); 
 
  $("#btn1").click(function(){
    $("[name='checkbox']").attr("checked",'true');
  })
   
  $("#cancel").click(function(){
    $("[name='checkbox']").removeAttr("checked");
  })
   
  $("#jishu").click(function(){
    $("[name='checkbox']:even").attr("checked",'true');
  })
   
  $("#fanxuan").click(function(){
    $("[name='checkbox']").each(function(){
      if($(this).attr("checked"))
      {
        $(this).removeAttr("checked");
      }
      else
      {
        $(this).attr("checked",'true');
      }
    })
  })
  $("#get").click(function(){
    var str="";
    $("[name='checkbox'][checked]").each(function(){
      str+=$(this).val()+"/r/n";
    })
    alert(str);
  })
})
 </script>
 </head>
 <body>
 <form name="form1" method="post" action="">
   <input type="checkbox" id="all" name="all">
   <input type="button" id="btn1" value="全选">
   <input type="button" id="cancel" value="取消全选">
   <input type="button" id="jishu" value="选中所有奇数">
   <input type="button" id="fanxuan" value="反选">
   <input type="button" id="get" value="获得选中的所有值">
   <br>
   <input type="checkbox" name="checkbox" value="蚂蚁部落一">
   蚂蚁部落一
   <input type="checkbox" name="checkbox" value="蚂蚁部落二">
   蚂蚁部落二
   <input type="checkbox" name="checkbox" value="蚂蚁部落三">
   蚂蚁部落三
   <input type="checkbox" name="checkbox" value="蚂蚁部落四">
   蚂蚁部落四
   <input type="checkbox" name="checkbox" value="蚂蚁部落五">
   蚂蚁部落五
   <input type="checkbox" name="checkbox" value="蚂蚁部落六">
   蚂蚁部落六
   <input type="checkbox" name="checkbox" value="蚂蚁部落七">
   蚂蚁部落七
   <input type="checkbox" name="checkbox" value="蚂蚁部落八">
   蚂蚁部落八
 </form>
</body>
</html>

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11012

更多内容可以参阅:http://www.softwhy.com/jquery/

爱程序网

Tags：[db:关键字]