大家都知道默认的html复选框控件样式可定义相当有限，无法满足大多用户的美观度。今天跟大家一起分享前一段时间自己编写的CheckBox控件。喜欢的朋友可以拿去使用，有什么好的建议希望你给我留言。废话不多说，切入正题。
Html部分代码如下：
- <b class="combox"></b>
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('<font class="cb_txt"></font>');
- //文本单击事件
- 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();
使用的图片：
示例展示图：