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. win10 下安装 MongoDB 数据库支持模块（python）

    C:\>pythonPython 3.5.2 (v3.5.2:4def2a2901a5, Jun 25 2016, 22:18:55) [MSC v.1900 64 bit (AMD64)] o ...

  2. master.HMaster: Failed to become active master

    Hbase集群启动后自动退出,日志错误: fatal error: master.HMaster: Failed to become active master java.io.IOException ...

  3. python教程（二）·变量

    什么是变量?在百度百科中,变量的解释是: 变量来源于数学,是计算机语言中能储存计算结果或能表示值抽象概念.变量可以通过-- 这是一段很长很长的解释,其实,作者认为没必要这么机械式的去理解.简单说,变量 ...

  4. A1092

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

  5. 小程序开发-13-小程序wxs的应用

    内容简介的换行 问题:因为微信的<text></text>标签能够转义\n,所以从服务器加载来的数据我们可以直接放到这个标签中,\n就会自己换行了.问题是服务器返回来的数据多了 ...

  6. ACM数论-快速幂

    ACM数论——快速幂 快速幂定义: 顾名思义,快速幂就是快速算底数的n次幂.其时间复杂度为 O(log₂N), 与朴素的O(N)相比效率有了极大的提高. 原理: 以下以求a的b次方来介绍: 把b转换成 ...

  7. 优步UBER司机全国各地奖励政策汇总 (2月29日-3月6日)

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

  8. 北京Uber优步司机奖励政策（12月18日）

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

  9. 4、Java并发编程：synchronized

    Java并发编程:synchronized 虽然多线程编程极大地提高了效率,但是也会带来一定的隐患.比如说两个线程同时往一个数据库表中插入不重复的数据,就可能会导致数据库中插入了相同的数据.今天我们就 ...

  10. Linux 下获取通讯IP

    #!/bin/sh # filename: get_net.sh default_route=$(ip route show) default_interface=$() address=$(ip a ...