jQuery全选和取消全选插件及代码分析
来源：程序员人生 发布时间：2014-04-03 04:27:44 阅读次数：3226次
在前端开发中，经常会出现这种情况：单击某一复选框实现某一行或某一列的复选框在被选中或不被选中的状态间切换。在没有jQuery之前，我们需要一大段js代码来实现这种效果。有了jQuery这个强大的库之后，我们可以很方便的开发实现这种效果的jQuery插件。我将它命名为jQuery.fn.selectAll插件。
在构建我们的插件之前，我们想考虑一下其功能需求：
所有复选框的状态都随全选复选框的状态而发生变化；
如果所有复选框都被选中时，全选复选框立即处于选中状态；
如果当前选中复选框的数量小于复选框的总数时，全选复选框立即处于非选中状态；
所以，在那些处于全选复选框控制之下的复选框全被点击时，就需要时刻判断当前被选中复选框的个数，从而决定全选复选框是否被选中。
该插件有一到两个参数：
range 定义所有需要进行操作的上下文背景；
func 一个处理函数，参数为当前选中的复选框的数量。
即：
var settings = {
range:'',
func:null
};
接下来要做的是：给所有复选框绑定click事件。在绑定事件之前，先得到除全选复选框之外的所有复选框以及数量。
var checks = $('input[type="checkbox"]',settings.range);
var sizes = checks.size();
对于全选复选框，绑定事件如下：
$(“#checkAll”).attr('checked','').click(function(){
var isCheck = $(this).attr("checked");
$(this).checks.attr('checked',isCheck);
var checkedSize = $('input[type="checkbox"]:checked',settings.range).size();
if($.isFunction(settings.func)){
settings.func(checkedSize);
}
})
对于其他复选框，事件如下：
checks.click(function(){
var checkedSize = $('input[type="checkbox"]:checked',settings.range).size();
if(checkedSize < self.sizes){
self.attr('checked','');
}else{
self.attr('checked','checked');
}
if($.isFunction(settings.func)){
settings.func(checkedSize);
}
})
完整代码如下：
/*
WelCome To Liehuo.Net
*/
(function(){
$.fn.selectAll = function(options){
var settings = {
range:'',
func:null
};
return this.each(function(){
if(options) settings = $.extend(settings, options);
var self = $(this);
var checks = $('input[type="checkbox"]',settings.range);
var sizes = checks.size();
$(this).click(function(){
var isCheck = $(this).attr("checked");
checks.attr('checked',isCheck);
var checkedSize = $('input[type="checkbox"]:checked',settings.range).size();
if($.isFunction(settings.func)){
settings.func(checkedSize);
}
})
checks.click(function(){
var checkedSize = $('input[type="checkbox"]:checked',settings.range).size();
if(checkedSize < self.sizes){
self.attr('checked','');
}else{
self.attr('checked','checked');
}
if($.isFunction(settings.func)){
settings.func(checkedSize);
}
})
})
}
})(jQuery)
查看代码演示：http://www.wfuyu.com/a/view/12521.html
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
