jQuery全選和取消全選插件及代碼分析
來源：程序員人生 發(fā)布時間：2014-04-03 04:27:44 閱讀次數(shù)：3396次
在前端開發(fā)中，經(jīng)常會出現(xiàn)這種情況：單擊某一復(fù)選框?qū)崿F(xiàn)某一行或某一列的復(fù)選框在被選中或不被選中的狀態(tài)間切換。在沒有jQuery之前，我們需要一大段js代碼來實現(xiàn)這種效果。有了jQuery這個強大的庫之后，我們可以很方便的開發(fā)實現(xiàn)這種效果的jQuery插件。我將它命名為jQuery.fn.selectAll插件。
在構(gòu)建我們的插件之前，我們想考慮一下其功能需求：
所有復(fù)選框的狀態(tài)都隨全選復(fù)選框的狀態(tài)而發(fā)生變化；
如果所有復(fù)選框都被選中時，全選復(fù)選框立即處于選中狀態(tài)；
如果當前選中復(fù)選框的數(shù)量小于復(fù)選框的總數(shù)時，全選復(fù)選框立即處于非選中狀態(tài)；
所以，在那些處于全選復(fù)選框控制之下的復(fù)選框全被點擊時，就需要時刻判斷當前被選中復(fù)選框的個數(shù)，從而決定全選復(fù)選框是否被選中。
該插件有一到兩個參數(shù)：
range 定義所有需要進行操作的上下文背景；
func 一個處理函數(shù)，參數(shù)為當前選中的復(fù)選框的數(shù)量。
即：
var settings = {
range:'',
func:null
};
接下來要做的是：給所有復(fù)選框綁定click事件。在綁定事件之前，先得到除全選復(fù)選框之外的所有復(fù)選框以及數(shù)量。
var checks = $('input[type="checkbox"]',settings.range);
var sizes = checks.size();
對于全選復(fù)選框，綁定事件如下：
$(“#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);
}
})
對于其他復(fù)選框，事件如下：
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.vxbq.cn/a/view/12521.html
生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
