Extend beautiful CheckBox based on jquery (written by yourself)_jquery

Everyone knows that the default HTML check box control style is quite limited in definition and cannot meet the aesthetics of most users. Today I would like to share with you the CheckBox control I wrote some time ago. Friends who like it can use it. If you have any good suggestions, I hope you can leave me a message. Without further ado, let’s get to the point.

Html part of the code is as follows:

Copy code The code is as follows:

< ;b class="combox">

Css part of the code is as follows:

Copy code The code is as follows:

.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 part of the code As follows:

1. Custom checkbox class

Copy code The code is as follows:

//Checkbox
var CheckBox = function () {
this.obj;
var _this = this, _obj;
//Initialization
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("The control properties are set incorrectly: some controls are not check boxes!");
return;
}
//Object click event
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();
}
}

//Set text checkbox
if (_obj.attr('_txt') != undefined) {
_obj.each(function (i) {
var cb = _obj.eq(i);
cb.wrapAll('');
//Text click event
cb.parent( ).append(cb.attr('_txt')).click(function () { click_fun(cb); });
});
} else//Object click event
_obj.unbind ('click').click(function () { click_fun($(this)); });
}
//Click callback event
this.click_callback = function () { }
//Cancel selection event
this.click_cancel = function () { }
}

2. Call as follows:

Copy the code The code is as follows:

var checkbox = new CheckBox();
checkbox.obj = $('.content ul li .combox');
//The click callback event can be adjusted according to your own needs. There is no corresponding operation event by default, so you don’t need to assign a value.
checkbox.click_callback = function () { fun_setPay(); }
//Cancel the selection event
checkbox.click_cancel = function () { fun_setPay(); }
checkbox.init();

Picture used:

Example display picture: