原生javascript自定义input[type=radio]效果

2018年6月27日更新

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7     <style type="text/css">
 8     input[type="radio"]+label::before {
 9         content: "";
10         /*不换行空格*/
11         display: inline-block;
12         vertical-align: middle;
13         font-size: 18px;
14          10px;
15         height: 10px;
16         margin-right: 10px;
17         border-radius: 50%;
18         border: 2px solid #01cd78;
19         text-indent: 15px;
20         line-height: 1;
21         padding: 4px;
22     }
23 
24     input[type="radio"]:checked+label::before {
25         background-color: #01cd78;
26         background-clip: content-box;
27     }
28 
29     input[type="radio"] {
30         position: absolute;
31         clip: rect(0, 0, 0, 0);
32     }
33     </style>
34 </head>
35 
36 <body>
37     <div class="female">
38         <input type="radio" id="female" name="sex" checked="" />
39         <label for="female">女</label>
40     </div>
41     <div class="male">
42         <input type="radio" id="male" name="sex" />
43         <label for="male">男</label>
44     </div>
45 </body>
46 
47 </html>

View Code

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

直接上图，如下

测试代码，如下

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>自定义radio和checkbox</title>
  7     <style type="text/css">
  8     #ceshi label input {
  9         display: none;
 10     }
 11 
 12     #ceshi label span {
 13         display: inline-block;
 14          18px;
 15         height: 18px;
 16         border-radius: 50%;
 17         border: 2px solid #ddd;
 18         box-sizing: border-box;
 19         position: relative;
 20         top: 3px;
 21         margin-right: 6px;
 22     }
 23 
 24     #ceshi label span.active {
 25         border: 3px solid red;
 26     }
 27     </style>
 28 </head>
 29 
 30 <body>
 31     <form id="ceshi" action="test.php" method="get">
 32 
 33         <label>
 34             <span></span>
 35             <input type="radio" name="t" value="这是测试1">这是测试1
 36         </label>
 37         <label>
 38             <span></span>
 39             <input type="radio" name="t" value="这是测试2">这是测试2
 40         </label>
 41         <label>
 42             <span></span>
 43             <input type="radio" name="t" value="这是测试3">这是测试3
 44         </label>
 45         <input type="submit" name="" value="提交">
 46     </form>
 47     <script type="text/javascript">
 48     
 49         Object.prototype.siblings = function() {
 50             var arr = []; //保存兄弟节点  
 51             var prev = this.previousSibling; //o的前一个同胞节点  
 52             //先往上查询兄弟节点  
 53             while (prev) {
 54                 if (prev.nodeType == 1 && prev.tagName == this.tagName) {
 55                     arr.unshift(prev); //数组首部插入数组，保证节点顺序  
 56                 }
 57                 prev = prev.previousSibling; //把上一节点赋值给prev  
 58             }
 59             //往下查询兄弟节点  
 60             var next = this.nextSibling; //o的后一个同胞节点  
 61             while (next) {
 62                 if (next.nodeType == 1 && next.tagName == this.tagName) {
 63                     arr.push(next); //数组尾部插入，保证节点顺序  
 64                 }
 65                 next = next.nextSibling; //下一节点赋值给next，用于循环  
 66             }
 67             return arr;
 68         }
 69         //判断HTMLElement是否含有某个class
 70         Object.prototype.hasClass = function(cls) {
 71             return this.className.match(new RegExp('(\s|^)' + cls + '(\s|$)'));
 72         }
 73         //HTMLElement对象添加类
 74         Object.prototype.addClass = function(cls) {
 75             if (!this.hasClass(cls)) this.className += " " + cls;
 76         }
 77         //HTMLElement对象删除类
 78         Object.prototype.removeClass = function(cls) {
 79             if (this.hasClass(cls)) {
 80                 var reg = new RegExp('(\s|^)' + cls + '(\s|$)');
 81                 this.className = this.className.replace(reg, ' ');
 82             }
 83         }
 84 
 85         function nativeSelfRadio(dom) {
 86             dom.getElementsByTagName("span")[0].addClass("active");
 87             dom.siblings().forEach(function(ele, val) {
 88                 ele.getElementsByTagName("span")[0].removeClass('active');
 89                 //ele.getElementsByTagName("span")[0].classList.remove('active');
 90             })
 91         }
 92         //绑定事件
 93         var len=document.getElementById("ceshi").getElementsByTagName("label");
 94         for (var i = 0; i < len.length; i++) {
 95             len[i].getElementsByTagName("input")[0].checked=false;//设置不选中
 96             len[i].onclick=function(){
 97                  nativeSelfRadio(this);
 98             }
 99         }
100 
101     </script>
102 </body>
103 
104 </html>

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

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

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

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

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