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