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. scala中“=>”的4种使用场景

    一直以来都对scala中"=>"的使用比较迷茫,也不知道他表示什么意思.今天就它的使用场景列举如下,希望可以共同探讨. 表示函数的返回类型(Function Type) sc ...

  2. python学习笔记：第15天 初识面向对象

    目录 1. 面向对象和面向过程 2. 面向对象如何编写: 3. 面向对象的三大特征 封装 继承 多态 1. 面向对象和面向过程 面向对象和面向过程的理解: ⾯向过程: ⼀切以事物的流程为核⼼. 核⼼是 ...

  3. C++实现json字符串与map的转换

    开源资源库 jsoncpp-src-0.5.0.tar.gz:https://sourceforge.net/projects/jsoncpp/ jsoncpp-master.ziphttps://g ...

  4. A1092

    可输入内容为0-9,a-z,A-Z. 输入: 第一行输入任意字符串: 第二行输入期望字符串. 输出: 如果第一行包含了所有期望字符串,输出yes和多余字符个数: 如果第一行不能完全包含期望字符串,输出 ...

  5. keil5最新版安装与破解

    1. 下载链接: https://pan.baidu.com/s/1BIrhqmxWdHY7hvihE0Wd4A 密码: cp45 2. 解压缩后得到: 3. 运行mdk526.exe安装keil5. ...

  6. BZOJ1432_Function_KEY

    题目传送门 找规律. 画一个像这样的图: 不同颜色为不同层,因为函数图像可对称,所以只考虑K<=N/2的情况. 最小为min(K,N-K+1)*2. N=1时特殊考虑,答案为1. code: # ...

  7. day 2 给程序传递参数

    1.如何实现变化name name = "alex" print("欢迎%s前来指导学习"%name) 欢迎alex前来指导学习 2.sys.argv impo ...

  8. 5 多进程copy文件

    1.如何进行开发? 2.版本1:程序大框架 #1.创建一个文件夹 #2.获取old文件夹中所有的文件名字 #3.使用多进程的方式copy原文件夹中的所有文件到新文件夹中 3.版本2:创建一个文件夹 1 ...

  9. SIFT 特征点提取算法

    SIFT特征点相对于ORB计算速度较慢,在没有GPU加速情况下,无法满足视觉里程计的实时性要求,或者无法运行在手机平台上,但是效果更好,精度更高.在应用时可以择优选取,了解其本质原理的动机是为了自己使 ...

  10. 基于Docker的UI自动化初探

    本文来自网易云社区 前言 一直以来,项目迭代的时间都是比较紧张的,开发加班加点coding,测试加班加点提bug.都说"时间像海绵里的水,挤挤总会有的"(当然这里的"挤挤 ...