继续分享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();
示例图片：
文章图片
样式集合图：
文章图片
脑球网及刚上线的网站：移动电源需要做外链留下联系方式。
下载地址：
js单选框控件
【javascript|基于jquery扩展漂亮的单选按钮——RadioButton】http://www.tiaoceng.com/assemblydetail_31.html
推荐阅读
- js数组常用方法总结（二）map&forEach
- vue性能优化|vue功能之“loading加载优化“
- vue|实现文本内容是超链接时自动转换为超链接
- webpack|webpack插件篇
- JavaScript中一些不常见的运算符号（三分钟看完）
- Web3D 从入门到跑路 · 3D 初体验
- 不懂物理的前端不是好的游戏开发者（二）—— 物理引擎的学习之路
- 源码|第13期在线音乐网站前后分离springboot整合vue
- Leetcode20有效的括号(栈的经典使用示例)