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. MFC非模态添加进程控件方法二（自定义消息方法）

    以下内容有大部分转载自CSDN,经过自己整理完成. 该文主要的方法为在非模态对话框中自定义一组消息函数,然后在主窗口中开辟一个线程通过线程把消息传递给子窗口进行更新. 在子窗口类中定义消息如下: /* ...

  2. 不搭建git服务器对git仓库进行局域网内共享多人合作开发项目

    有时候在一个临时局域网内没有搭建git服务器,但是又想多人开发一个项目,此时只要每个人电脑安装有git客户端,参考一下方法即可尝试建一个本地化的远程仓库进行多人开发工作. 远程仓库通常只是一个裸仓库( ...

  3. 深圳Uber优步司机奖励政策（1月4日~1月10日）

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

  4. OKVIS（一）初始化流程及代码结构

    OKVIS代码结构: okvis_apps: your own app okvis_ceres: backend main code, estimator, error term;  okvis_co ...

  5. Spring缓存穿透问题修复

    本文来自网易云社区. 本剧情纯属真实,犹如雷同实乃缘分. 发生 事情的发生在某天早上,天气怎样反正是忘了,只记得当时监控平台大量的数据库错误报警. 作为后端开发,当看到日志中大量的db连接获取失败,心 ...

  6. mysql数据库目录存放位置更改

    http://haowen.blog.51cto.com/3486731/1274721 mysql数据库存储路径更改 使用了VPS一段时间之后发现磁盘空间快满了.本人的VPS在购买的时候买了500g ...

  7. Django自定义管理表单

    修改polls/admin.py: from django.contrib import admin from .models import Choice, Question class Choice ...

  8. Selenium（Python）调用pywin32上传图片

    import unittestfrom time import sleep import osfrom selenium import webdriverimport win32apiimport w ...

  9. python操作字符串内容并重新输出

    今天在做一个函数的作业,题目如下: 编写一个函数实现大写转小写,小写变大写,并且转换为镜像字符串,并且将字符串变为镜像字符串. 例如:’A’变为’Z’,’b’变为’y 示范字符串: ”sdSdsfdA ...

  10. Python汉诺塔问题递归算法与程序

    汉诺塔问题: 问题来源:汉诺塔来源于印度传说的一个故事,上帝创造世界时作了三根金刚石柱子,在一根柱子上从上往下从小到大顺序摞着64片黄金圆盘.上帝命令婆罗门把圆盘从下面开始按大小顺序重新摆放在另一根柱 ...