快捷導(dǎo)航

原生javascript自定義input[type=radio]效果示例

更新時(shí)間：2019年08月27日 10:30:10 作者：zhensg

這篇文章主要介紹了原生javascript自定義input[type=radio]效果,結(jié)合實(shí)例形式分析了javascript模擬form表單中radio效果的相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了原生javascript自定義input[type=radio]效果。分享給大家供大家參考，具體如下：

找到最為簡(jiǎn)單的僅僅使用css3的方案

<!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>

在最近的一次開(kāi)發(fā)中，或者在之前的開(kāi)發(fā)中，經(jīng)常性的用到單選框這個(gè)form表單元素。而ui給出的設(shè)計(jì)方案絕對(duì)也不是原生的radio樣式，面對(duì)這種場(chǎng)景，自定義radio效果成為一種解決方案。

直接上圖，如下

測(cè)試代碼，如下

<!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="這是測(cè)試1">這是測(cè)試1
    </label>
    <label>
      <span></span>
      <input type="radio" name="t" value="這是測(cè)試2">這是測(cè)試2
    </label>
    <label>
      <span></span>
      <input type="radio" name="t" value="這是測(cè)試3">這是測(cè)試3
    </label>
    <input type="submit" name="" value="提交">
  </form>
  <script type="text/javascript">
    Object.prototype.siblings = function() {
      var arr = []; //保存兄弟節(jié)點(diǎn) 
      var prev = this.previousSibling; //o的前一個(gè)同胞節(jié)點(diǎn) 
      //先往上查詢(xún)兄弟節(jié)點(diǎn) 
      while (prev) {
        if (prev.nodeType == 1 && prev.tagName == this.tagName) {
          arr.unshift(prev); //數(shù)組首部插入數(shù)組，保證節(jié)點(diǎn)順序 
        }
        prev = prev.previousSibling; //把上一節(jié)點(diǎn)賦值給prev 
      }
      //往下查詢(xún)兄弟節(jié)點(diǎn) 
      var next = this.nextSibling; //o的后一個(gè)同胞節(jié)點(diǎn) 
      while (next) {
        if (next.nodeType == 1 && next.tagName == this.tagName) {
          arr.push(next); //數(shù)組尾部插入，保證節(jié)點(diǎn)順序 
        }
        next = next.nextSibling; //下一節(jié)點(diǎn)賦值給next，用于循環(huán) 
      }
      return arr;
    }
    //判斷HTMLElement是否含有某個(gè)class
    Object.prototype.hasClass = function(cls) {
      return this.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    }
    //HTMLElement對(duì)象添加類(lèi)
    Object.prototype.addClass = function(cls) {
      if (!this.hasClass(cls)) this.className += " " + cls;
    }
    //HTMLElement對(duì)象刪除類(lèi)
    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;//設(shè)置不選中
      len[i].onclick=function(){
         nativeSelfRadio(this);
      }
    }
  </script>
</body>
</html>

最初開(kāi)發(fā)時(shí)候，也習(xí)慣了用jquery，但慢慢也意識(shí)到原生不熟走不遠(yuǎn)的道理，于是開(kāi)始各種原生實(shí)現(xiàn)。上述測(cè)試代碼均采用原生js實(shí)現(xiàn)；

本人覺(jué)得需要關(guān)注的地方有：

1）、函數(shù)掛載的原型對(duì)象是HTMLElement，實(shí)際原型對(duì)象寫(xiě)為Object也是可以的

2）、添加或者刪除類(lèi)可以自己來(lái)寫(xiě)，也可以用HTML5的接口classList，添加或者刪除類(lèi)

3）、避免返回該頁(yè)面，radio依然為選中狀態(tài)，需要加載完頁(yè)面后將radio選中狀態(tài)設(shè)置為false，如果業(yè)務(wù)需要單獨(dú)選中哪個(gè)，就需要定制了

感興趣的朋友可以使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: