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

继续分享网前端自定义控件，今天所要分享的控件是单选按钮，希望对你有收获，有好的建议也希望能留言给我。代码如下：Html代码如下：复制代码代码如下： div style=' margin 336050 px ' float : left ' b类='radio' _txt='单选我b类='radio' _txt='单选你b类='radio' _txt='单选他/div Css代码如下：复制代码代码如下：收音机{ float : leftbackground : URL(/img/Icon _ BG。巴布亚新几内亚)；} .收音机radio { width:14pxheight:14px背景-位置：0 px-58px；光标：指针指针；font-size :9 px} .无线电。已检查{背景-位置：-15px-58px；} .radio _ txt { float : leftmargin :0 px 0 10pxcursor : pointer指针；线高：14 pxfont-size :12 px} .收音机_txt .无线电{右边距：5 px} Js部分代码： 1、自定义单选按钮类复制代码代码如下： //单选项var单选按钮=function(){ this。objvar _this=this，_ obj//初始化这个。init=function(){ _ obj=_ this。objvar tem=_obj.length 1？_ obj。eq(0): _ obj；if (tem.attr('class ').indexOf(' radio ')==-1){显示消息('控件属性设置有误：部分控件并不是单选项！');返回；} //单选事件var click _ fun=fun(obj){ if(obj。parent().attr(' class ')==' radio _ txt '){ obj。parent().父项()。查找('。收音机_txt .收音机')。removeClass(“”选中');} else obj。姐弟('。收音机')。removeClass(“”选中');obj.addClass('选中');_这个。click _回调()；};//设置有文字单选项if (_obj.attr('_txt ')！=undefined) { _obj.each(函数(一){ var radio=_ obj。情商(一)；无线电。wrap pall(' font class=' radio _ txt '/font ')；//文本单击事件radio.parent().追加(radio.attr('_txt ').click(function () { click_fun(单选);});});} else//对象点击事件_obj.unbind(单击).click(function(){ click _ fun($(this))；});} //点击回调事件这个。click _ callback=function(){ } } 2、实例化：复制代码代码如下： //初始化单选框var radio=新单选按钮()；radio.obj=$(' .收音机');无线电。init()；示例图片

样式集合图