原⽣javascript⾃定义input[type=radio]效果⽰例
本⽂实例讲述了原⽣javascript⾃定义input[type=radio]效果。分享给⼤家供⼤家参考，具体如下：
到最为简单的仅仅使⽤css3的⽅案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input[type="radio"]+label::before {
content: "";
/
html input type属性*不换⾏空格*/
display: inline-block;
vertical-align: middle;
font-size: 18px;
width: 10px;
height: 10px;
margin-right: 10px;
border-radius: 50%;
border: 2px solid #01cd78;
text-indent: 15px;
line-height: 1;
padding: 4px;
}
input[type="radio"]:checked+label::before {
background-color: #01cd78;
background-clip: content-box;
}
input[type="radio"] {
position: absolute;
clip: rect(0, 0, 0, 0);
}
</style>
</head>
<body>
<div class="female">
<input type="radio" id="female" name="sex" checked="" />
<label for="female">⼥</label>
</div>
<div class="male">
<input type="radio" id="male" name="sex" />
<label for="male">男</label>
</div>
</body>
</html>
在最近的⼀次开发中，或者在之前的开发中，经常性的⽤到单选框这个form表单元素。⽽ui给出的设计⽅案绝对也不是原⽣的radio样式，⾯对这种场景，⾃定义radio效果成为⼀种解决⽅案。
直接上图，如下
测试代码，如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>⾃定义radio和checkbox</title>
<style type="text/css">
#ceshi label input {
display: none;
}
#ceshi label span {
display: inline-block;
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid #ddd;
box-sizing: border-box;
position: relative;
top: 3px;
margin-right: 6px;
}
#ceshi label span.active {
border: 3px solid red;
}
</style>
</head>
<body>
<form id="ceshi" action="test.php" method="get">
<label>
<span></span>
<input type="radio" name="t" value="这是测试1">这是测试1
</label>
<label>
<span></span>
<input type="radio" name="t" value="这是测试2">这是测试2
</label>
<label>
<span></span>
<input type="radio" name="t" value="这是测试3">这是测试3
</label>
<input type="submit" name="" value="提交">
</form>
<script type="text/javascript">
Object.prototype.siblings = function() {
var arr = []; //保存兄弟节点
var prev = this.previousSibling; //o的前⼀个同胞节点
//先往上查询兄弟节点
while (prev) {
if (deType == 1 && prev.tagName == this.tagName) {
arr.unshift(prev); //数组⾸部插⼊数组，保证节点顺序
}
prev = prev.previousSibling; //把上⼀节点赋值给prev
}
//往下查询兄弟节点
var next = Sibling; //o的后⼀个同胞节点
while (next) {
if (deType == 1 && next.tagName == this.tagName) {
arr.push(next); //数组尾部插⼊，保证节点顺序
}
next = Sibling; //下⼀节点赋值给next，⽤于循环
}
return arr;
}
/
/判断HTMLElement是否含有某个class
Object.prototype.hasClass = function(cls) {
return this.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
//HTMLElement对象添加类
Object.prototype.addClass = function(cls) {
if (!this.hasClass(cls)) this.className += " " + cls;
}
//HTMLElement对象删除类
veClass = function(cls) {
if (this.hasClass(cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
this.className = place(reg, ' ');
}
}
function nativeSelfRadio(dom) {
dom.siblings().forEach(function(ele, val) {
//ElementsByTagName("span")[0].ve('active');
})
}
/
/绑定事件
var ElementById("ceshi").getElementsByTagName("label");    for (var i = 0; i < len.length; i++) {
len[i].getElementsByTagName("input")[0].checked=false;//设置不选中
len[i].onclick=function(){
nativeSelfRadio(this);
}
}
</script>
</body>
</html>
最初开发时候，也习惯了⽤jquery，但慢慢也意识到原⽣不熟⾛不远的道理，于是开始各种原⽣实现。上述测试代码均采⽤原⽣js实现；
本⼈觉得需要关注的地⽅有：
1）、函数挂载的原型对象是HTMLElement，实际原型对象写为Object也是可以的
2）、添加或者删除类可以⾃⼰来写，也可以⽤HTML5的接⼝classList，添加或者删除类
3）、避免返回该页⾯，radio依然为选中状态，需要加载完页⾯后将radio选中状态设置为false，如果业务需要单独选中哪个，就需要定制了
更多关于JavaScript相关内容可查看本站专题：《》、《》、《》、《》、《》、《》及《》
希望本⽂所述对⼤家JavaScript程序设计有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。