22
Mar
2010

jQuery实现全选和取消全选插件

在前端开发中，经常会出现这种情况：单击某一复选框实现某一行或某一列的复选框在被选中或不 被选中的状态间切换。在没有jQuery之前，我们需要一大段js代码来实现这种效果。有了jQuery这个强大的库之后，我们可以很方便的开发实现这种 效果的jQuery插件。我将它命名为jQuery.fn.selectAll插件。

在构建我们的插件之前，我们想考虑一下其功能需求：

  1. 所有复选框的状态都随全选复选框的状态而发生变化；
  2. 如果所有复选框都被选中时，全选复选框立即处于选中状态；
  3. 如果当前选中复选框的数量小于复选框的总数时，全选复选框立即处于非选中状态；

所以，在那些处于全选复选框控制之下的复选框全被点击时，就需要时刻判断当前被选中复选框的 个数，从而决定全选复选框是否被选中。

该插件有一到两个参数：

  • range 定义所有需要进行操作的上下文背景；
  • func 一个处理函数，参数为当前选中的复选框的数量。

即：

1.var settings = {
2. range:'',
3. func:null
4.};

接下来要做的是：给所有复选框绑定click事件。在绑定事件之前，先得到除全选复选框之外 的所有复选框以及数量。

1.var checks = $('input[type="checkbox"]',settings.range);
2. var sizes = checks.size();

对于全选复选框，绑定事件如下：

1.$(“#checkAll”).attr('checked','').click(function(){
2. var isCheck = $(this).attr("checked");
3. $(this).checks.attr('checked',isCheck);
4. var checkedSize = $('input[type="checkbox"]:checked',settings.range).size();
5. if($.isFunction(settings.func)){
6. settings.func(checkedSize);
7. }
8. })

对于其他复选框，事件如下：

01.checks.click(function(){
02. var checkedSize = $('input[type="checkbox"]:checked',settings.range).size();
03. if(checkedSize < self.sizes){
04. self.attr('checked','');
05. }else{
06. self.attr('checked','checked');
07. }
08. if($.isFunction(settings.func)){
09. settings.func(checkedSize);
10. }
11. })

完整代码如下：

01.(function(){
02.$.fn.selectAll = function(options){
03. var settings = {
04. range:'',
05. func:null
06. };
07. return this.each(function(){
08. if(options) settings = $.extend(settings, options);
09. var self = $(this);
10. var checks = $('input[type="checkbox"]',settings.range);
11. var sizes = checks.size();
12. $(this).click(function(){
13. var isCheck = $(this).attr("checked");
14. checks.attr('checked',isCheck);
15. var checkedSize = $('input[type="checkbox"]:checked',settings.range).size();
16. if($.isFunction(settings.func)){
17. settings.func(checkedSize);
18. }
19. })
20. checks.click(function(){
21. var checkedSize = $('input[type="checkbox"]:checked',settings.range).size();
22. if(checkedSize < sizes){
23. self.attr('checked','');
24. }else{
25. self.attr('checked','checked');
26. }
27. if($.isFunction(settings.func)){
28. settings.func(checkedSize);
29. }
30. })
31. })
32.}
33.})(jQuery)

查看demo

转载地址：http://www.denisdeng.com/?p=669

Tags:
Posted in jQuery

Leave a Reply