自定义html radio,原生javascript自定义input[type=radio]效果示例

本文实例讲述了原生javascript自定义input[type=radio]效果。分享给大家供大家参考，具体如下：

找到最为简单的仅仅使用css3的方案

Document

input[type="radio"]+label::before {

content: "";

/*不换行空格*/

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

}

女

男

在最近的一次开发中，或者在之前的开发中，经常性的用到单选框这个form表单元素。而ui给出的设计方案绝对也不是原生的radio样式，面对这种场景，自定义radio效果成为一种解决方案。

直接上图，如下

测试代码，如下

自定义radio和checkbox

#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;

}

这是测试1

这是测试2

这是测试3

Object.prototype.siblings = function() {

var arr = []; //保存兄弟节点

var prev = this.previousSibling; //o的前一个同胞节点

//先往上查询兄弟节点

while (prev) {

if (prev.nodeType == 1 && prev.tagName == this.tagName) {

arr.unshift(prev); //数组首部插入数组，保证节点顺序

}

prev = prev.previousSibling; //把上一节点赋值给prev

}

//往下查询兄弟节点

var next = this.nextSibling; //o的后一个同胞节点

while (next) {

if (next.nodeType == 1 && next.tagName == this.tagName) {

arr.push(next); //数组尾部插入，保证节点顺序

}

next = next.nextSibling; //下一节点赋值给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对象删除类

Object.prototype.removeClass = function(cls) {

if (this.hasClass(cls)) {

var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');

this.className = this.className.replace(reg, ' ');

}

}

function nativeSelfRadio(dom) {

dom.getElementsByTagName("span")[0].addClass("active");

dom.siblings().forEach(function(ele, val) {

ele.getElementsByTagName("span")[0].removeClass('active');

//ele.getElementsByTagName("span")[0].classList.remove('active');

})

}

//绑定事件

var len=document.getElementById("ceshi").getElementsByTagName("label");

for (var i = 0; i < len.length; i++) {

len[i].getElementsByTagName("input")[0].checked=false;//设置不选中

len[i].οnclick=function(){

nativeSelfRadio(this);

}

}

最初开发时候，也习惯了用jquery，但慢慢也意识到原生不熟走不远的道理，于是开始各种原生实现。上述测试代码均采用原生js实现；

本人觉得需要关注的地方有：

1)、函数挂载的原型对象是HTMLElement，实际原型对象写为Object也是可以的

2)、添加或者删除类可以自己来写，也可以用HTML5的接口classList，添加或者删除类

3)、避免返回该页面，radio依然为选中状态，需要加载完页面后将radio选中状态设置为false，如果业务需要单独选中哪个，就需要定制了

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。