基于jquery自定義的漂亮單選按鈕RadioButton

<p style="margin:50px;float:left;"> 
<b class="radio" _txt="單選我"></b> 
<b class="radio" _txt="單選你"></b> 
<b class="radio" _txt="單選他"></b> 
</p>

.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();