jquery复选框操作(全选反选与不选,判断复选框是否被选中)

发布时间:2019-09-19编辑:脚本学堂
jquery复选框操作例子,包括jquery实现复选框的全选、反选、全不选,以及jquery判断复选框是否选中的方法与例子。

如下图:
<a href=http://www.jb200.com/jb/jquery/ target=_blank class=infotextkey>jquery</a><a href=http://www.jb200.com/zt/fuxuankuang/ target=_blank class=infotextkey>复选框</a>操作

例子,jquery实现复选框的全选、反选与不选
 

复制代码 代码示例:
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<script type="text/javascript" src="script/jquery-1.4.3.js"></script> 
<script> 
$(function(){ 
   $("#checkedAll").click(function(){ 
      $('[name=items]:checkbox').attr('checked',true); 
   }); 
   $("#CheckedNo").click(function(){ 
     $('[name=items]:checkbox').attr('checked',false); 
   }); 
  $("#CheckedRev").click(function(){ 
     $('[name=items]:checkbox').each(function(){ 
       $(this).attr("checked",!$(this).attr("checked")); 
       // 也可以: this.checked=!this.checked; 
     }); 
  }); 
   
  $("#CheckedAllNo").click(function(){ 
       $('[name=items]:checkbox').attr("checked",this.checked); 
  }); 
   
  $('[name=items]:checkbox').click(function(){ 
     var flag=true; 
     $('[name=items]:checkbox').each(function(){ 
        if(!this.checked){ 
        flag=false; 
        } 
     }); 
     $('#CheckedAllNo').attr('checked',flag); 
  }) 
}) 
</script> 
</head> 
<body> 
<form> 
  你爱好的运动是?<br/> 
   <input type="checkbox" id="CheckedAllNo" />全选/全不选 
   <br/> 
  <input type="checkbox" name="items" value="足球" />足球 
  <input type="checkbox" name="items" value="篮球" />篮球 
  <input type="checkbox" name="items" value="羽毛球" />羽毛球 
  <input type="checkbox" name="items" value="乒乓球" />乒乓球 
  <br/> 
  <input type="button" id="CheckedAll" value="全选" /> 
  <input type="button" id="CheckedNo" value="全不选" /> 
  <input type="button" id="CheckedRev" value="反选" /> 
  <input type="button" id="send" value="提交" /> 
</form> 
</body> 
</html> 

二、jquery判断复选框是否被选中
 

复制代码 代码示例:
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Insert title here</title> 
<script src="../script/jquery-1.4.3.js" type="text/javascript"></script> 
<script type="text/javascript"> 
//DOM方式来判断复选框是否被选中 
$(function(){ 
   var $cr=$("#cr"); 
   var cr=$cr[0];//DOM对象 或者 $cr.get(0) 
   $cr.click(function(){ 
     if(cr.checked){ //DOM方式判断 
      alert("感谢您的支持,您可以继续操作了"); 
     } 
   }); 
}); 
 
$(function(){ 
 var $cr=$("#cr"); 
 $cr.click(function(){ 
    if($cr.is(":checked")){//jQuery方式判断 
      alert("感谢您的支持,您可以继续操作了"); 
    } 
 }); 
}); 
</script> 
</head> 
<body> 
<input type="checkbox"id="cr" /><label for="cr">我已经阅读了上面制度</label> 
</body> 
</html>