你的位置:首页 > Java教程

[Java教程]jQuery实现的checkbox复选框全选和全不选效果


jQuery实现的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"> $(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()方法的区别一章节。

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

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