jquery的全选插件

全选看起来挺简单的,要做得完美就不那么容易了。

目前,我的全选插件能做到以下6点:

1.点击全选checkbox,能将要选择的checkbox都选中。去掉全选按钮,能将所有的checkbox都不选。这是最基本的功能,凡网上所有的有关全选的脚本都能满足这个要求。

2.点击选择的checkbox们,能根据是不是已经全部选择了,自动勾选或者取消勾选“全选checkbox”。

3.如果另外还有"全选按钮",点击的时候也要能全选。

4.如果还有“全不选按钮”,点击的时候要能全不选。

5.全选与不选的状态切换中,要能自定义事件,与全选与不选的状态相呼应。

6.若存在checkbox组,组1、组2要控制组内的全选问题,还要另外有全选按钮能控制对组1、组2的全选。然后可以无限向下嵌套。

 1 (function ($) {
 2     $.fn.nCheckAll = function (settings) {
 3         var defaultSetting = { filter: null, checkButton: false, notCheckButton: false, toggleFun: false };
 4         var self = $(this);
 5         $.extend(defaultSetting, settings);
 6         var selectStr = defaultSetting.filter;
 7         var flagToggle = true;
 8 
 9         self.each(function () {
10             this.checkAll = function (checked) {
11                 checkAll(checked);
12             }
13         });
14 
15         $(defaultSetting.filter).each(function () {
16             this.check = function () {
17                 setAllCheckBoxState($(this).attr("checked") && isAllChecked(selectStr));
18             }
19         });
20 
21         function checkSub(checked) {
22             $(defaultSetting.filter).each(function () {
23                 if (this.checkAll) this.checkAll(checked);
24             });
25         }
26 
27         function checkSup(checked) {
28             self.each(function () {
29                 if (this.check) this.check();
30             });
31         }
32 
33         function isAllChecked(selectStr) {
34             var res = true;
35             $(selectStr).each(function () {
36                 if (!$(this).attr("checked")) {
37                     res = false;
38                     return false;
39                 }
40             });
41             return res;
42         }
43 
44         function doToggle(flag) {
45             if (defaultSetting.toggleFun) { defaultSetting.toggleFun(flag); flagToggle = !flag; }
46         }
47 
48         function setAllCheckBoxState(checked) {
49             doToggle(checked);
50             setChecked(self, checked);
51             checkSup(checked);
52         }
53 
54         function setChecked(item, checked) {
55             if (checked) item.attr("checked", true);
56             else item.removeAttr("checked");
57         }
58 
59         function setEventForchkAll(selectStr) {
60             self.bind("click", function () {
61                 this.checkAll($(this).attr("checked"));
62             });
63 
64             $(selectStr).bind("click", function () {
65                 this.check();
66             });
67 
68             setAllCheckBoxState(isAllChecked(selectStr));
69         }
70 
71         function checkAll(checked) {
72             setChecked($(selectStr), checked);
73             setAllCheckBoxState(checked);
74             checkSub(checked);
75         }
76 
77         setEventForchkAll(selectStr);
78 
79         if (defaultSetting.checkButton) $(defaultSetting.checkButton).bind("click", function () {
80             checkAll(flagToggle);
81         });
82 
83         if (defaultSetting.notCheckButton) $(defaultSetting.notCheckButton).bind("click", function () {
84             checkAll(false);
85         });
86     }
87 })(jQuery);
源代码

使用举例:

function toogleBtn(checked) {
   if (checked) $("#btnCheckAll").val("全不选(A)");
   else $("#btnCheckAll").val("全选(A)");
  }
  $(function () {
   $(".chkAll input[type='checkbox']").nCheckAll({ filter: ".chkSelected input[type='checkbox']"
   , checkButton: "#btnCheckAll"
   , toggleFun: toogleBtn
   });
  });

 

posted on 2013-07-16 16:19  张祈璟  阅读(1644)  评论(0编辑  收藏  举报