全选看起来挺简单的,要做得完美就不那么容易了。
目前,我的全选插件能做到以下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 }); });