html好看的单选按钮,基于jquery自定义的漂亮单选按钮RadioButton

继续分享web前端自定义控件，今天所要分享的控件是单选按钮，希望对你有收获，有好的建议也希望能留言给我。代码如下：

Html代码如下：

Css代码如下：

.radio{float:left;background:url(/img/Icon_BG.png);}

.radio{width:14px;height:14px;background-position:0px -58px;cursor:pointer;font-size:9px;}

.radio.checked{background-position: -15px -58px;}

.radio_txt{float:left;margin:0px 0 0 10px;cursor:pointer;line-height:14px;font-size:12px;}

.radio_txt .radio{margin-right:5px;}

Js部分代码：

1、自定义单选按钮类

//单选项

var RadioButton = function () {

this.obj;

var _this = this, _obj;

//初始化

this.init = function () {

_obj = _this.obj;

var tem = _obj.length > 1 ? _obj.eq(0) : _obj;

if (tem.attr('class').indexOf('radio') == -1) {

showMessage("控件属性设置有误：部分控件并不是单选项！");

return;

}

//单选事件

var click_fun = function (obj) {

if (obj.parent().attr('class') == 'radio_txt') {

obj.parent().parent().find('.radio_txt .radio').removeClass('checked');

} else

obj.siblings('.radio').removeClass('checked');

obj.addClass('checked');

_this.click_callback();

};

//设置有文字单选项

if (_obj.attr('_txt') != undefined) {

_obj.each(function (i) {

var radio = _obj.eq(i);

radio.wrapAll('');

//文本单击事件

radio.parent().append(radio.attr('_txt')).click(function () { click_fun(radio); });

});

} else//对象点击事件

_obj.unbind('click').click(function () { click_fun($(this)); });

}

//点击回调事件

this.click_callback = function () { }

}

2、实例化：

//初始化单选框

var radio = new RadioButton();

radio.obj = $('.radio');

radio.init();

示例图片：

 

样式集合图：