本文实例讲述了原生javascript自定义输入(type=无线电)效果。分享给大家供大家参考,具体如下:
找到最为简单的仅仅使用css3的方案
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Document
& lt;风格类型=" text/css "比;
输入(type=肮悴ァ?+标签::{之前
内容:“”;/*不换行空格*/显示:inline-block;
vertical-align:中间;
字体大小:18 px;
宽度:10 px;
高度:10 px;
margin-right: 10 px;
这个特性:50%;
边界:2 px固体# 01 cd78;
indent: 15 px;
行高:1;
填充:4 px;
}
输入(type=肮悴ァ?:检查+标签::{之前
background - color: # 01 cd78;
background-clip:内容框;
}
输入(type=肮悴ァ?{
位置:绝对的;
片段:矩形(0,0,0,0);
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=芭浴北?
& lt;输入类型=肮悴ァ眎d=芭浴钡拿?="/靶浴奔觳楸?
& lt;标签=芭浴钡脑谂? lt;/label>
& lt;/div>
& lt; div类="男"比;
& lt;输入类型=肮悴ァ眎d=澳行浴眓ame="性"/比;
& lt;标签="男"祝辞男& lt;/label>
& lt;/div>
& lt;/body>
& lt;/html>
之前
在最近的一次开发中,或者在之前的开发中,经常性的用到单选框这个形式表单元素,而ui给出的设计方案绝对也不是原生的无线电样式,面对这种场景,自定义无线电效果成为一种解决方案。
直接上图,如下
测试代码,如下
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>自定义电台和checkbox
& lt;风格类型=" text/css "比;
#前标签输入{
显示:没有;
}
#前标签跨度{
显示:inline-block;
宽度:18 px;
高度:18 px;
这个特性:50%;
边界:2 px固体# ddd;
box-sizing: border-box;
位置:相对;
上图:3 px;
margin-right: 6 px;
}
#前标签。活跃的{
边界:3 px固体红;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt;形式id=扒啊毙卸?辈馐浴hp”方法="得到"比;
& lt; label>
& lt; span> & lt;/span>
& lt;输入类型=肮悴ァ眓ame=" t " value=" https://www.yisu.com/zixun/这是测试1”在这是测试1
& lt;/label>
& lt; label>
& lt; span> & lt;/span>
& lt;输入类型=肮悴ァ眓ame=" t " value=" https://www.yisu.com/zixun/这是测试2”在这是测试2
& lt;/label>
& lt; label>
& lt; span> & lt;/span>
& lt;输入类型=肮悴ァ眓ame=" t " value=" https://www.yisu.com/zixun/这是测试3”在这是测试3
& lt;/label>
& lt;输入类型=疤峤弧眓ame=" value=" https://www.yisu.com/zixun/提交”比;
& lt;/form>
& lt;脚本type=" text/javascript祝辞
Object.prototype。兄弟姐妹=function () {
var arr=[];//保存兄弟节点
var prev=this.previousSibling;//o的前一个同胞节点//先往上查询兄弟节点
而(上一页){
如果(上一页。nodeType==1,,上一页。tagName==this.tagName) {
arr.unshift(上一页);//数组首部插入数组,保证节点顺序
}
prev=prev.previousSibling;//把上一节点赋值给上一页
}//往下查询兄弟节点
var下=this.nextSibling;//o的后一个同胞节点
而(下){
如果下一个。nodeType==1,,下一个。tagName==this.tagName) {
arr.push(下);//数组尾部插入,保证节点顺序
}
下一个=next.nextSibling;//下一节点赋值给接下来,用于循环
}
返回arr;
}//判断HTMLElement是否含有某个类
Object.prototype。hasClass=函数(cls) {
this.className返回。(新RegExp匹配((\ \ | ^)”+ cls + (\ \ | $)));
}//HTMLElement对象添加类
Object.prototype。addClass=函数(cls) {
如果(! this.hasClass (cls))。类名+=" + cls;
}//HTMLElement对象删除类
Object.prototype。removeClass=函数(cls) {
如果(this.hasClass (cls)) {
var reg=new RegExp ((\ \ | ^)”+ cls + (\ \ | $));
这一点。className=this.className。替换(reg”、“);
}
}
函数nativeSelfRadio (dom) {
dom.getElementsByTagName(“跨度”)[0].addClass(“活跃”);
dom.siblings ()。forEach(函数(避署,val) {
ele.getElementsByTagName(“跨度”)[0].removeClass(“活跃的”);//ele.getElementsByTagName(“跨度”)[0].classList.remove(“活跃的”);
})
}//绑定事件
var len=. getelementbyid(前).getElementsByTagName(“标签”);
(var=0;我& lt;len.length;我+ +){
len[我].getElementsByTagName(“输入”)[0]支票=false;//设置不选中
len[我].onclick=function () {
nativeSelfRadio(这个);
}
}
& lt;/script>
& lt;/body>
& lt;/html>
