原生JavaScript实现自定义input[type=radio]样式与交互

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  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);
  }
  </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>

<!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 (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].onclick=function(){
         nativeSelfRadio(this);
      }
    }
  </script>
</body>
</html>