2018年6月27日 更新

找到最为简单的仅仅使用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: %;

         border: 2px solid #01cd78;

         text-indent: 15px;

         line-height: ;

         padding: 4px;

     }

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

         background-color: #01cd78;

         background-clip: content-box;

     }

     input[type="radio"] {

         position: absolute;

         clip: rect(, , , );

     }

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

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

直接上图，如下

测试代码，如下

 <!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: %;

         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 ==  && prev.tagName == this.tagName) {

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

                 }

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

             }

             //往下查询兄弟节点

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

             while (next) {

                 if (next.nodeType ==  && 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")[].addClass("active");

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

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

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

             })

         }

         //绑定事件

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

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

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

             len[i].onclick=function(){

                  nativeSelfRadio(this);

             }

         }

     </script>

 </body>

 </html>

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

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

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

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

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

原生javascript自定义input[type=radio]效果的更多相关文章

  1. 原生javascript自定义input[type=checkbox]效果

    2018年6月27日  更新 能用css3,就不用js 用纯css3实现样式重写 <!DOCTYPE html> <html lang="en"> < ...

  2. 自定义input[type="radio"]的样式

    对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 为了最大程度的显示出它们的差别,并且为了好看,首先定义了一些样式: <fo ...

  3. 自定义input[type="radio"]

    对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 对单选按钮自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :c ...

  4. 自定义input[type="radio"]的样式（支持普通浏览器，IE8以上）

    对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 对单选按钮自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :c ...

  5. 纯css兼容个浏览器input[type='radio']不能自定义样式

    各个浏览器对于表单input[type='radio'].input[type='checkbox']的样式总是各有差异   //html <div class="remember-a ...

  6. input[type="radio"]自定义样式

    input为radio时,虽然会有默认选中的样式,但是并不符合大多数项目的需求,我们的目标是可以随心所欲自定义它的样式.怎么做呢?其实很简单,只要抓住3点.分别是1.label 2.隐藏自带样式 3. ...

  7. <input type="radio" >与<input type="checkbox">值得获取

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  8. 定制 input[type="radio"] 和 input[type="checkbox"] 样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

  9. 修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

随机推荐

  1. 理解Linux系统调用

    目录 1.什么是系统调用 2.linux的系统调用 3.linux系统调用实现 1.什么是系统调用 系统调用,指的是操作系统提供给用户程序调用的一组特殊接口,用户程序可以根据这组接口获得操作系统内核的 ...

  2. 在树莓派上用 python 做一个炫酷的天气预报

    教大家如何在树莓派上自己动手做一个天气预报.此次教程需要大家有一定的python 基础,没有也没关系,文末我会放出我已写好的代码供大家下载. 首先在开始之前 需要申请高德地图API,去高德地图官网注册 ...

  3. ruby 反射机制常用方法

    1. 获取类的名称: .class 2. 获取超类的名称:.superclass 3. 获取类包含的模块:.class.included_modules 4. 检查是否为实例对象:.instance_ ...

  4. 组播___IGMP

    一.基本概念: 1.协议概述: 是运行在主机和与主机直连的路由器之间,其实现的功能是双向的:一方面,主机通过IGMP通知路由器希望接收某个特定组播组的信息:另一方面,路由器通过IGMP周期性地查询局域 ...

  5. 浅谈ConcurrentHashMap实现原理

    我们都知道HashTable是线程安全的类,因为使用了Synchronized来锁整张Hash表来实现线程安全,让线程独占: ConcurrentHashMap的锁分离技术就是用多个锁来控制对Hash ...

  6. 天津Uber优步司机奖励政策（1月11日~1月17日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  7. 上海Uber优步司机奖励政策（12月28日到1月3日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  8. CentOS 5/6上安装EPEL源

    转自:http://www.vckai.com/p/25 EPEL 是什么? EPEL (Extra Packages for Enterprise Linux,企业版Linux的额外软件包) 是Fe ...

  9. NPOI List数据源 导出excel

    List数据源生成HSSFWorkbook通用方法: public class WorkBook { public static HSSFWorkbook BuildSwitchData<T&g ...

  10. PyCharm添加Selenium与Appium类库

    PyCharm添加Selenium与Appium依赖, 不需要用pip去安装!