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

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

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

  
  
  
  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效果成为一种解决方案。

直接上图，如下

测试代码，如下

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


  
  

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

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

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

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

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

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

更多关于Javascript相关内容可查看本站专题：《Javascript操作DOM技巧总结》、《Javascript页面元素操作技巧总结》、《Javascript事件相关操作与技巧大全》、《Javascript查找算法技巧总结》、《Javascript数据结构与算法技巧总结》、《Javascript遍历算法与技巧总结》及《Javascript错误与调试技巧总结》

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