自制jQuery 复选框全选与反选插件
(function ($) {
//复选框全选
$.fn.checkAll = function (options) {
var defaults = {
chName:"checkName", //复选框name属性
callBack:null //回调函数
},
$obj = $(this), //引用对象
$items = $("input:checkbox[name=" + options.chName + "]"), //所有name匹配的复选框
checkedItem = 0; //选中的复选框个数
options = $.extend(defaults, options);
//链式调用
//链式调用
return this.each(function(){
$items.click(function () {
//如果选中总数等于总数
//全选打勾,label文字变成“全不选”
//否则，不打勾
if ($items.length === $items.filter(":checked").length) {
$obj.prop("checked", true);
$obj.next("label") && $obj.next("label").text("全不选");
} else {
$obj.prop("checked", false);
$obj.next("label") && $obj.next("label").text("全 选");
}
//执行回调函数
if (typeof options.callBack === "function") {
options.callBack();
}
});
$obj.click(function () {
//判断该框的状态
//等于就取消所有选中,label文字变成“全选”
//否则，选中所有
if (this.checked) {
$items.prop("checked", true);
$obj.next("label") && $obj.next("label").text("全不选") ;
} else {
$items.prop("checked", false);
$obj.next("label") && $obj.next("label").text("全选");
}
if (typeof options.callBack === "function") {
options.callBack();
}
});
});
};
})(jQuery);
