基于jquery擴(kuò)展漂亮的CheckBox(自己編寫)

更新時(shí)間：2013年11月19日 15:51:25 作者：

默認(rèn)的html復(fù)選框控件樣式可定義相當(dāng)有限，下面就與大家分享下自己編寫的CheckBox控件。喜歡的朋友可以拿去使用

大家都知道默認(rèn)的html復(fù)選框控件樣式可定義相當(dāng)有限，無法滿足大多用戶的美觀度。今天跟大家一起分享前一段時(shí)間自己編寫的CheckBox控件。喜歡的朋友可以拿去使用，有什么好的建議希望你給我留言。廢話不多說，切入正題。

Html部分代碼如下：

復(fù)制代碼代碼如下:

Css部分代碼如下：

復(fù)制代碼代碼如下:

 
.combox{float:left;background:url(/img/Icon_BG.png);} 
.combox{width:16px;height:16px;background-position:-21px -40px;cursor:pointer;font-size:9px;} 
.combox.checked{background-position:-37px -40px;} 

Js部分代碼如下：

1、自定復(fù)選框類

復(fù)制代碼代碼如下:

 
//復(fù)選框 
var CheckBox = function () { 
this.obj; 
var _this = this, _obj; 
//初始化 
this.init = function () { 
_obj = _this.obj; 
var tem = _obj.length > 1 ? _obj.eq(0) : _obj; 
if (tem.length == 1 && tem.attr('class').indexOf('combox') == -1) { 
showMessage("控件屬性設(shè)置有誤：部分控件并不是復(fù)選框！"); 
return; 
} 
//對象單擊事件 
var click_fun = function (obj) { 
if (obj.attr('class').indexOf('checked') > -1) { 
obj.removeClass('checked'); 
_this.click_cancel(); 
} else { 
obj.addClass('checked'); 
_this.click_callback(); 
} 
} 

//設(shè)置有文字復(fù)選框 
if (_obj.attr('_txt') != undefined) { 
_obj.each(function (i) { 
var cb = _obj.eq(i); 
cb.wrapAll('<font class="cb_txt"></font>'); 
//文本單擊事件 
cb.parent().append(cb.attr('_txt')).click(function () { click_fun(cb); }); 
}); 
} else//對象點(diǎn)擊事件 
_obj.unbind('click').click(function () { click_fun($(this)); }); 
} 
//點(diǎn)擊回調(diào)事件 
this.click_callback = function () { } 
//取消選擇事件 
this.click_cancel = function () { } 
} 

2、調(diào)用如下：

復(fù)制代碼代碼如下:

 
var checkbox = new CheckBox(); 
checkbox.obj = $('.content ul li .combox'); 
//點(diǎn)擊回調(diào)事件 根據(jù)自己的需求去調(diào)整，默認(rèn)沒有相應(yīng)操作事件，可以不用賦值 
checkbox.click_callback = function () { fun_setPay(); } 
//取消選擇事件 
checkbox.click_cancel = function () { fun_setPay(); } 
checkbox.init(); 

使用的圖片：