基于jquery自定义的漂亮单选按钮RadioButton

　　<div style="margin:50px;float:left;">

　　<b class="radio" _txt="单选我"></b>

　　<b class="radio" _txt="单选你"></b>

　　<b class="radio" _txt="单选他"></b>

　　</div>

　　.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;}

　　//单选项

　　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('<font class="radio_txt"></font>');

　　//文本单击事件

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

　　});

　　} else//对象点击事件

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

　　}

　　//点击回调事件

　　this.click_callback = function () { }

　　}

　　//初始化单选框

　　var radio = new RadioButton();

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

　　radio.init();