原生javascript自定义input[type=radio]效果示例


Posted in Javascript onAugust 27, 2019

本文实例讲述了原生javascript自定义input[type=radio]效果。分享给大家供大家参考,具体如下:

找到最为简单的仅仅使用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: 50%;
    border: 2px solid #01cd78;
    text-indent: 15px;
    line-height: 1;
    padding: 4px;
  }
  input[type="radio"]:checked+label::before {
    background-color: #01cd78;
    background-clip: content-box;
  }
  input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
  }
  </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效果成为一种解决方案。

直接上图,如下

原生javascript自定义input[type=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: 50%;
    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 == 1 && prev.tagName == this.tagName) {
          arr.unshift(prev); //数组首部插入数组,保证节点顺序 
        }
        prev = prev.previousSibling; //把上一节点赋值给prev 
      }
      //往下查询兄弟节点 
      var next = this.nextSibling; //o的后一个同胞节点 
      while (next) {
        if (next.nodeType == 1 && 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")[0].addClass("active");
      dom.siblings().forEach(function(ele, val) {
        ele.getElementsByTagName("span")[0].removeClass('active');
        //ele.getElementsByTagName("span")[0].classList.remove('active');
      })
    }
    //绑定事件
    var len=document.getElementById("ceshi").getElementsByTagName("label");
    for (var i = 0; i < len.length; i++) {
      len[i].getElementsByTagName("input")[0].checked=false;//设置不选中
      len[i].onclick=function(){
         nativeSelfRadio(this);
      }
    }
  </script>
</body>
</html>

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

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

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

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

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

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
IE8 中使用加速器(Activities)
May 14 Javascript
jquery向上向下取整适合分页查询
Sep 06 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 #Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 #Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 #Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 #jQuery
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 #Javascript
javascript实现抢购倒计时程序
Aug 26 #Javascript
VUE路由动态加载实例代码讲解
Aug 26 #Javascript
You might like
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
js 动态选中下拉框
2009/11/26 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
利用Python实现颜色色值转换的小工具
2016/10/27 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
会计专业自荐信范文
2013/12/02 职场文书
会计电算化专业求职信
2014/06/10 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
2014年内勤工作总结
2014/11/24 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书