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

本文实例讲述了原生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效果成为一种解决方案。

直接上图,如下

测试代码,如下

<!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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

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

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

时间: 2019-08-25

js实现表单Radio切换效果的方法

本文实例讲述了js实现表单Radio切换效果的方法.分享给大家供大家参考.具体如下: 这里基于js实现表单中的Radio单选框切换效果,当选中某个单选框的时候,所属范围会一同变换,我觉得大家应该收藏一下,以前想用的时候苦苦叫不上这种效果的名字,现在找到了,而且实现起来竟然如此简单,有些地方要注意,获取标签名为myradio的标签. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-radio-cha-codes/ 具体代码如下:

js获取RadioButtonList的Value/Text及选中值等信息实现代码

HTML代码 复制代码 代码如下: <asp:RadioButtonList ID="rbtnCompany" runat="server" RepeatColumns="4" RepeatDirection="horizontal"> <asp:ListItem Value="1" Text="A"></</SPAN>asp:ListItem&

js实现动态改变radio状态的方法

h5的radio是自带选中状态改变的,但是如果自带的状态无法满足自己的需求时,就需要自己去实现. 代码如下: h5部分代码 <p class="group"> <label class="active"> <input type="radio" name="parent_radio" value="1" id="new_data" onclick="

JS实现的radio图片选择按钮效果

用JS实现的radio图片选择按钮效果.注意:input后面的空格.用到的图片: 用JS实现的radio图片选择按钮效果-我们 .lanrentuku img{border:1px solid #008800;} function myFun(sId) { var oImg = document.getElementsByTagName('img'); for (var i = 0; i 用JS实现的radio图片选择按钮效果. 注意:input后面的空格. 查找更多代码,请访问:我们 [Ctr

JS实现点击Radio动态更新table数据

tbody定义一个标签 当上面变化的,在js里面做拼接就行了,拼接结束 tbody.html(XXX) <script type="text/javascript"> $(function(){ var quotas = { 1:{name:"工商银行",oneTime:1000}, 2:{name:"农业银行",oneTime:800}, 3:{name:"中国银行",oneTime:2000}, 4:{name

纯JS打造网页中checkbox和radio的美化效果

图片素材: 效果图: <head> <style> BODY { FONT-FAMILY: "Segoe UI", Frutiger, Tahoma, Helvetica, "Helvetica Neue", Arial, sans-serif; FONT-SIZE:62.5% } LABEL { MARGIN-RIGHT: 1.2em } .custom-checkbox { POSITION: relative } .custom-rad

js获取 type=radio 值的方法

复制代码 代码如下: <ul> <li> <input type="radio" name="radio" value="前台支付 " id="radio" />前台支付 --如需整晚保留,请预付房费. </li> <li> <input type="radio" name="radio" value="担保支付

js实现的简单radio背景颜色选择器代码

本文实例讲述了js实现的简单radio背景颜色选择器.分享给大家供大家参考.具体如下: 这里演示的js实现radio网页背景颜色选择器,只需点击对应颜色的radio单选框,就可以改变网页的背景颜色,简单方便,实用的javaScript网页特效. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-radio-cha-bgcolor-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT

javascript radio 联动效果

<script> function checkradio(o,x){ document.getElementsByName("inptB")[x-1].checked=o.checked } </script> <input name="inptA" type="radio" id="inptA" onclick="checkradio(this,1)">aaa <

利用JavaScript更改input中radio和checkbox样式

本文涉及到的图片 body { margin: 0px; padding: 0px; font-size: 13px; } .input_style { padding: 6px 0px; width: 600px; margin: 0px auto; border-bottom: #666666 1px dotted; } .input_style span { display: inline-block; width: 15px; height: 15px; text-align: left

jQuery 操作input中radio的技巧

通过jQuery获取页面中的所有radio对象,遍历页面中的radio,取消选中的标签,因为使用到jQuery时间,因此引用到了网上公共的js,这只是本人的一些总结,大神勿喷. <html> <head> <title>取消</title> <script language="javascript"> function _onclick() { $("input[name='ra']:checked").v

IE中radio 或checkbox的checked属性初始状态下不能选中显示问题

在IE中,在使用checkbox或radio时,你会发现有时不能通过CheckBoxObject.checked = true或CheckBoxObject.setAttribute('checked', true)的方法使checkbox或radio被预选中. 解决这个问题的方法就是利用checkbox或radio的defaultChecked的属性,将defaultChecked属性置为true即可,具体实现是 CheckBoxObject.setAttribute('defaultChec

JavaScript取得gridview中获取checkbox选中的值

测试好半天,才出来,checkbox在第一列, for( i=1;i<document.all.GVmain.rows.length;i++) { var cb=document.all.GVmain.rows(i).cells(0).children(0); if(cb.checked) { temp0=document.all.GVmain.rows(i).cells(1).innerText; temp1=document.all.GVmain.rows(i).cells(5).inner

JavaScript获取并更改input标签name属性的方法

本文实例讲述了JavaScript获取并更改input标签name属性的方法.分享给大家供大家参考.具体实现方法如下: <input name="kk"></input> <script language="javascript"> // 这里用getElementsByTagName把所有的input对象取出来, //这是这个问题的关键性的地方,用ByTagName而不是ByName. var list = document.g

JQuery扩展插件Validate—6 radio、checkbox、select的验证

效果如下所示: 解决这个问题的办法是将错误信息指定到一个特定的位置,validate()方法的参数中可以进行自定义,示例代码如下: 复制代码 代码如下: <script type="text/javascript"> jQuery.validator.addMethod("regex", //addMethod第1个参数:方法名称 function(value, element, params) { //addMethod第2个参数:验证方法, //验证

JQuery触发radio或checkbox的change事件

早上要做一功能,checkbox被选中时,显示隐藏的层,取消选中时,再隐藏选中的层. 初始代码如下: 复制代码 代码如下: $(function(){ $("#ischange").change(function() { alert("checked"); }); }); 捣腾了半天,竟然一点反应都没有.百度了下,有高人指出上面几行代码在Firefox等浏览器中可以正常运行,即你选中复选框或取消复选框都会弹出一个对话框,但是在IE中却不会正常执行,即选中或取消复选框

使用JS批量选中功能实现更改数据库中的status状态值(批量展示)

我们在开发项目的时候经常会在后台管理时用到批量展示功能来动态的修改数据库的值.下面以修改数据库的status状态值来实现批量展示功能.批量选中功能引用js来实现. 前端html代码: <table class="mlt" style="border:1px solid red;"> <thead> <tr> <if condition="$type eq 'pg'"> <th colspan=

javascript的document中的动态添加标签实现方法

document的高级篇中提供了节点操作的函数,具体包括:获取节点,改变节点,删除节点,替换节点,创建节点,添加节点,克隆节点等函数.我们可以利用这些函数动态改变html的节点. 1.JavaScript <script type="text/javascript"> function test1(){//对个节点的ID相同时候的情况 var myhref = document.getElementById('same'); window.alert(myhref.inne