大家都知道默认的html复选框控件样式可定义相当有限，无法满足大多用户的美观度。今天跟大家一起分享前一段时间自己编写的CheckBox控件。喜欢的朋友可以拿去使用，有什么好的建议希望你给我留言。废话不多说，切入正题。
效果如下图所示：
Html完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>基于jquery扩展漂亮的CheckBox-幸凡学习网</title>
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
<style type="text/css">
li{list-style:none;}
.combox{float:left;background:url(http://img.blog.csdn.net/20131118235940937);}
.combox{width:16px;height:16px;background-position:-21px -40px;cursor:pointer;font-size:9px;margin-right:1px;}
.combox.checked{background-position:-37px -40px;}
.cb_txt{display:inline-block;margin-right:3px; cursor:pointer;line-height:16px;}
</style>
</head>
<body>
<div class="content"> <b class="combox _txt" _txt="审核"></b> <b class="combox _txt" _txt="商户管理"></b> <b class="combox _txt" _txt="数据清理"></b> <b class="combox _txt" _txt="产品管理清理"></b> </div>
<script>
//复选框
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 () { }
}
var checkbox = new CheckBox();
checkbox.obj = $('.content .combox');
//点击回调事件 根据自己的需求去调整，默认没有相应操作事件，可以不用赋值
checkbox.click_callback = function () {
//fun_setPay();
}
//取消选择事件
checkbox.click_cancel = function () {
//fun_setPay(); //可以取消值
}
checkbox.init();
</script>
</body>
</html>
使用的图片：
示例展示图：
(完)