基于jquery扩展漂亮的CheckBox

大家都知道默认的html复选框控件样式可定义相当有限，无法满足大多用户的美观度。今天跟大家一起分享前一段时间自己编写的CheckBox控件。喜欢的朋友可以拿去使用，有什么好的建议希望你给我留言。废话不多说，切入正题。

Html部分代码如下：

1. <b class="combox"></b>

Css部分代码如下：

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

Js部分代码如下：

1.自定复选框类

1. //复选框
2. var CheckBox = function () {
3. this.obj;
4. var _this = this, _obj;
5. //初始化
6. this.init = function () {
7. _obj = _this.obj;
8. var tem = _obj.length > 1 ? _obj.eq(0) : _obj;
9. if (tem.length == 1 && tem.attr('class').indexOf('combox') == -1) {
10. showMessage("控件属性设置有误：部分控件并不是复选框！");
11. return;
12. }
13. //对象单击事件
14. var click_fun = function (obj) {
15. if (obj.attr('class').indexOf('checked') > -1) {
16. obj.removeClass('checked');
17. _this.click_cancel();
18. } else {
19. obj.addClass('checked');
20. _this.click_callback();
21. }
22. }
23. //设置有文字复选框
24. if (_obj.attr('_txt') != undefined) {
25. _obj.each(function (i) {
26. var cb = _obj.eq(i);
27. cb.wrapAll('<font class="cb_txt"></font>');
28. //文本单击事件
29. cb.parent().append(cb.attr('_txt')).click(function () { click_fun(cb); });
30. });
31. } else//对象点击事件
32. _obj.unbind('click').click(function () { click_fun($(this)); });
33. }
34. //点击回调事件
35. this.click_callback = function () { }
36. //取消选择事件
37. this.click_cancel = function () { }
38. }

2。调用如下：

1. var checkbox = new CheckBox();
2. checkbox.obj = $('.content ul li .combox');
3. //点击回调事件 根据自己的需求去调整，默认没有相应操作事件，可以不用赋值
4. checkbox.click_callback = function () { fun_setPay(); }
5. //取消选择事件
6. checkbox.click_cancel = function () { fun_setPay(); }
7. checkbox.init();

使用的图片：

示例展示图：