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. mysql索引建立原则

    看了网上一些网上关于创建索引的原则,在这里做一下总结: 1.尽量创建在使用频率较高的字段上,比如主键,外键,where总用到的字段,join是相关联的字段 2.如果表过大,一定要创建索引. 3.索引应 ...

  2. Hbase过滤器

    Hbase过滤器简介 HBase的基本API,包括增.删.改.查等,增.删都是相对简单的操作,与传统的RDBMS相比,这里的查询操作略显苍白,只能根据特性的行键进行查询(Get)或者根据行键的范围来查 ...

  3. 关于Json.dumos中的ensure_ascii

    在使用json,dumps时,当需要输出中文时,需要在后面添加  ensure_ascii = Fasle 因为json.dumps 序列化时,默认对中文使用的是 ascii 编码,添加后才能输出中文 ...

  4. Shr-前端汇总

    F7控件监听 f7控件的监听是指,在点击F7控件时,对控件内的内容进行选中后出发该事件监听:通过参数value可以获取当前F7控件的一些值信息. //人力编制方案监听 回写计划期间 及分录数据 ini ...

  5. Process Monitor工具找网吧广告

    很多网吧经常有遇到有一些客户机多了一些广告或者是可能是有中毒的情况.Process Monitor 软件可以方便的监视和记录系统各程序的进程线程,注册表,网络,文件读写等活动. 1,开超级用户,双击打 ...

  6. centos7系统配置系统用户基于ssh的google身份验证

    最近也是服务器各种被入侵,所以在安全上,要万分注意,特此记录,借助google的身份验证插件,获取动态验证码完成ssh登陆. OS: centos7 安装配置: 1. 安装epel源 yum -y i ...

  7. 01-JVM内存模型：程序计数器

    一.JVM模型概述 java虚拟机(JVM)在java程序运行的过程中,会将它所管理的内存划分为若干个不同的数据区域,这些区域有的随着JVM的启动而创建,有的随着用户线程的启动和结束而建立和销毁.一个 ...

  8. beauifulsoup模块的介绍

    01   爬虫基础知识介绍 相关库:1.requests,re  2.BeautifulSoup   3.hackhttp 使用requests发起get,post请求,获取状态码,内容: 使用re匹 ...

  9. 怎样用Eclipse将Java源代码生成可执行文件[转]

    eclipse将java源代码生成jar可执行文件 用eclipse做了一个web项目的自动化测试,自己用的时候倒是很方便,打开eclipse直接运行即可,但是分享给其他小伙伴用的时候就不太方便,希望 ...

  10. Microbit MicroPython 介绍

    Python 是全世界最受欢迎的程序语言之一(world’s most popular ) .如果不特别说明,你可能每天在使用Python 写成的软件而不知道.像许多著名的公司跟组织如 Google, ...