基於jquery擴展漂亮的CheckBox(自己寫)_jquery

大家都知道預設的html複選框控制項樣式可定義相當有限，無法滿足多數使用者的美觀。今天跟大家一起分享前陣子自己寫的CheckBox控制項。喜歡的朋友可以拿去使用，有什麼好的建議希望你留言給我。廢話不多說，切入正題。

Html部分程式碼如下：

複製程式碼 程式碼如下:

Css部分代碼如下：

複製代碼


程式碼如下:

.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、自定複選框類




複製代碼


代碼如下:


//複選框
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("控制項屬性設定錯誤：部分控制項並不是複選框！");
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();
}
}
}

//設定有文字複選框
if (_obj.attr('_txt') != undefined) {
_obj.each(function (i) {
var cb = _obj.eq( i);
cb.wrapAll('');
//文字點選事件

cb.parent().append(cb.attr( '_txt')).click(function () { click_fun(cb); });
});
} else//物件點擊事件

_obj.unbind('click').click( function () { click_fun($(this)); }); } //點擊回呼事件this.click_callback = function () { } //取消選取事件 this.click_cancel = function () { } }

2、調用如下：




複製代碼

程式碼如下:

var checkbox = new CheckBox();
checkbox.obj = $('.content ul li .combox');
//點擊回呼事件依照自己的需求去調整，預設沒有對應操作事件，可以不用賦值checkbox.click_callback = function () { fun_setPay(); } //取消選擇事件checkbox.click_cancel = function () { fun_setPay(); } checkbox.init(); 使用的圖片：  範例展示圖：