jQuery复选框全选和全不选效果

快乐打工仔 分类:实例代码

复选框的全选和全不选效果在代码中非常的常用,尤其在批量处理的需求中更是如此,下面就通过一个代码实例简单介绍一下如何实现此效果,希望能够对需要的朋友有所帮助,代码实例如下:

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.pipipi.net/" /> 
<title>复选框全选和取消代码-犀牛前端部落</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function(){ 
  $("#CheckAll").click(function(){ 
    var flag=$(this).prop("checked"); 
    if(flag){
      $("#flag").text("取消");
    }
    else{
       $("#flag").text("全选");
     }
    $("[name=subBox]:checkbox").each(function(){ 
      $(this).prop("checked",flag); 
    }) 
  }) 
}) 
</script> 
</head> 
<body> 
<div> 
<input id="CheckAll" type="checkbox" /><span id="flag">全选</span> 
<input name="subBox" type="checkbox" />犀牛前端部落一
<input name="subBox" type="checkbox" />犀牛前端部落二 
<input name="subBox" type="checkbox" />犀牛前端部落三 
<input name="subBox" type="checkbox" />犀牛前端部落四 
</div> 
</body> 
</html>

以上代码实现了我们的要求,能够实现复选框的全选和全部选效果,下面简单介绍一下实现过程。

一.实现原理:

(1).点击第一个复选框实现全选和全不选:

当点击那个复选框的时候,能够获取此复选框的checked属性值,并且将其他的复选框的checked属性值设置为第一个复选框的checked属性值,这样就实现了全选和全不选效果。

(2).提示文本的切换:

当第一个复选框的checked属性值为true的时候也就是全选中的时候,将span中的文本设置为取消,如果为false的时候设置为全选。

二.相关阅读:

(1).click事件参阅jQuery click事件一章节。

(2).prop()函数参阅jQuery prop()一章节。

(3).prop()函数和attr()函数参阅prop()方法和attr()方法的区别一章节。

jQuery复选框全选和全不选效果,这样的场景在实际项目中还是用的比较多的,关于jQuery复选框全选和全不选效果就介绍到这了。

jQuery复选框全选和全不选效果属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容