首页 技术 正文
技术 2022年11月20日
0 收藏 699 点赞 4,898 浏览 2254 个字

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

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

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

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

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

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

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

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

 (function ($) {
$.fn.nCheckAll = function (settings) {
var defaultSetting = { filter: null, checkButton: false, notCheckButton: false, toggleFun: false };
var self = $(this);
$.extend(defaultSetting, settings);
var selectStr = defaultSetting.filter;
var flagToggle = true; self.each(function () {
this.checkAll = function (checked) {
checkAll(checked);
}
}); $(defaultSetting.filter).each(function () {
this.check = function () {
setAllCheckBoxState($(this).attr("checked") && isAllChecked(selectStr));
}
}); function checkSub(checked) {
$(defaultSetting.filter).each(function () {
if (this.checkAll) this.checkAll(checked);
});
} function checkSup(checked) {
self.each(function () {
if (this.check) this.check();
});
} function isAllChecked(selectStr) {
var res = true;
$(selectStr).each(function () {
if (!$(this).attr("checked")) {
res = false;
return false;
}
});
return res;
} function doToggle(flag) {
if (defaultSetting.toggleFun) { defaultSetting.toggleFun(flag); flagToggle = !flag; }
} function setAllCheckBoxState(checked) {
doToggle(checked);
setChecked(self, checked);
checkSup(checked);
} function setChecked(item, checked) {
if (checked) item.attr("checked", true);
else item.removeAttr("checked");
} function setEventForchkAll(selectStr) {
self.bind("click", function () {
this.checkAll($(this).attr("checked"));
}); $(selectStr).bind("click", function () {
this.check();
}); setAllCheckBoxState(isAllChecked(selectStr));
} function checkAll(checked) {
setChecked($(selectStr), checked);
setAllCheckBoxState(checked);
checkSub(checked);
} setEventForchkAll(selectStr); if (defaultSetting.checkButton) $(defaultSetting.checkButton).bind("click", function () {
checkAll(flagToggle);
}); if (defaultSetting.notCheckButton) $(defaultSetting.notCheckButton).bind("click", function () {
checkAll(false);
});
}
})(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
});
});
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,492
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,907
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,740
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,494
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,132
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,295