原生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 相关文章推荐
16个最流行的JavaScript框架[推荐]
May 29 Javascript
ECMAScript 创建自己的js类库
Nov 22 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
微信小程序实现授权登录
May 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
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
php的一个简单加密解密代码
2014/01/14 PHP
php实现的用户查询类实例
2015/06/18 PHP
PHP如何使用Memcached
2016/04/05 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
Python中基本的日期时间处理的学习教程
2015/10/16 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
python多线程扫描端口(线程池)
2019/09/04 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
程序员机试试题汇总
2012/03/07 面试题
线程同步的方法
2016/11/23 面试题
超市实习总结自我鉴定
2013/09/19 职场文书
临床医师专业个人自我评价
2014/01/08 职场文书
拖鞋店创业计划书
2014/01/15 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
2014年库房工作总结
2014/11/26 职场文书
喋血孤城观后感
2015/06/08 职场文书
Python使用openpyxl模块处理Excel文件
2022/06/05 Python