jQuery实现自定义checkbox和radio样式


Posted in Javascript onJuly 13, 2015

1,起因

最近在工作中要实现自定义式的radio样式,而我们通常使用的时默认的样式,因为自己实在想不到解决的方法,于是开始搜索,最终看到了不错的解决办法,可以完美解决我们遇到的问题。

2,原理

大家都知道在写结构的时候,radio或checkbox都会跟随label一起使用,label的for属性值和input的id值相同的情况下,点击label就可以选中input,这里正是利用label 来覆盖我们的input默认样式,通过给label添加背景图片(美化的checkbox或radio),也就是在点击的过程中,我们是看不到默认的input的(给input设置z-index:-1),而点击的是label,通过不同的事件,加载不同的背景图片(这里是改变背景图片的位置)

3,设置美化checkbox或radio的默认样式

(1)页面结构

<form class="form" method="post">
  <fieldset>
    <legend>Which genres do you like?</legend>
    <input type="checkbox" value="action" id="check-1" name="genre"><label for="check-1" class="">Action / Adventure</label>
    <input type="checkbox" value="comedy" id="check-2" name="genre"><label for="check-2" class="">Comedy</label>
    <input type="checkbox" value="epic" id="check-3" name="genre"><label for="check-3" class="">Epic / Historical</label>
    <input type="checkbox" value="science" id="check-4" name="genre"><label for="check-4" class="">Science Fiction</label>
    <input type="checkbox" value="romance" id="check-5" name="genre"><label for="check-5" class="">Romance</label>
    <input type="checkbox" value="western" id="check-6" name="genre"><label for="check-6" class="">Western</label>
  </fieldset> 
  <fieldset>
    <legend>Caddyshack is the greatest movie of all time, right?</legend>
    <input type="radio" value="1" id="radio-1" name="opinions"><label for="radio-1" class="">Totally</label>
    <input type="radio" value="1" id="radio-2" name="opinions"><label for="radio-2" class="">You must be kidding</label>
    <input type="radio" value="1" id="radio-3" name="opinions"><label for="radio-3" class="">What's Caddyshack?</label>
  </fieldset>
</form>

 (2)jquery code(前提必须引入jquery库)

jQuery.fn.customInput = function(){
  $(this).each(function(i){
    if($(this).is('[type=checkbox],[type=radio]')){
      var input = $(this);
      //get the associated label using the input's id
      var label = $('label[for='+input.attr('id')+']');
      //get type,for classname suffix
      var inputType = (input.is('[type=checkbox]')) ? 'checkbox' : 'radio';
      //wrap the input + label in a div
      $('<div class="custom-'+ inputType +'"></div>').insertBefore(input).append(input,label);
      //find all inputs in this set using the shared name attribute
      var allInputs = $('input[name='+input.attr('name')+']');
      //necessary for browsers that don't support the :hover pseudo class on labels
      label.hover(function(){
        $(this).addClass('hover');
        if(inputType == 'checkbox' && input.is(':checked')) {
          $(this).addClass('checkedHover');
        }
      },function(){
        $(this).removeClass('hover checkedHover');
      });
       
      //bind custom event, trigger it, bind click,focus,blur events
      input.bind('updateState',function(){
        if(input.is(':checked')){
          if(input.is(':radio')){
            allInputs.each(function(){
              $('label[for='+$(this).attr('id')+']').removeClass('checked');
            });
          };
          label.addClass('checked');
        } else {
          label.removeClass('checked checkedHover checkedFocus');
        }
      })
      .trigger('updateState')
      .click(function(){
        $(this).trigger('updateState');
      })
      .focus(function(){
        label.addClass('focus');
        if(inputType == 'checkbox' && input.is(':checked')) {
          $(this).addClass('checkedFocus');
        }
      })
      .blur(function(){
        label.removeClass('focus checkedFocus');
      });        
    }
  });
}

 引入jquery库,再引入上面的代码后,就可以执行下面的代码

$('input').customInput();

 (3)生成的外层div

如果你的代码结构是label和input成对写的话,那么在它们的外层就会生成一个div,如图

jQuery实现自定义checkbox和radio样式

(4)设置自定义默认样式

准备好一张图,如下:

jQuery实现自定义checkbox和radio样式

你可能会问,为什么上面没有在顶端,而是有一定的距离,因为我们的input选项多是居中的,而我们是使用label的背景图片来模拟的,所以我们是为了让input选项居中显示。总之:ico小图标一定要垂直排列,一定要留有一定的距离来达到居中显示。

/* wrapper divs */
      .custom-checkbox,
      .custom-radio {
        position: relative;
        display: inline-block;
      }
      /* input, label positioning */
      .custom-checkbox input,
      .custom-radio input {
        position: absolute;
        left: 2px;
        top: 3px;
        margin: 0;
        z-index: -1;
      }
      .custom-checkbox label,
      .custom-radio label {
        display: block;
        position: relative;
        z-index: 1;
        font-size: 1.3em;
        padding-right: 1em;
        line-height: 1;
        padding: .5em 0 .5em 30px;
        margin: 0 0 .3em;
        cursor: pointer;
      }

 这是最外层的一些设置,当然你可以自己修改

/* ==默认状态效果== */
      .custom-checkbox label { 
        background: url(images/checkbox.gif) no-repeat; 
      }
      .custom-radio label { 
        background: url(images/button-radio.png) no-repeat; 
      }
      .custom-checkbox label, 
      .custom-radio label {
        background-position: 0px 0px;
      }
/*==鼠标悬停和得到焦点状态==*/
      .custom-checkbox label.hover,
      .custom-checkbox label.focus,
      .custom-radio label.hover,
      .custom-radio label.focus {
        /*background-position: -10px -114px;*/
      }
      
      /*==选中状态==*/
      .custom-checkbox label.checked,
      .custom-radio label.checked {
        background-position: 0px -47px;
      }
      .custom-checkbox label.checkedHover,
      .custom-checkbox label.checkedFocus {
        /*background-position: -10px -314px;*/
      }
      .custom-checkbox label.focus,
      .custom-radio label.focus {
        outline: 1px dotted #ccc;
      }

结尾:总之,我是完美的解决了我的问题,顺便截图发一个看看

jQuery实现自定义checkbox和radio样式

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
判断页面是关闭还是刷新的js代码
Jan 28 Javascript
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
js调用屏幕宽度的简单方法
Nov 14 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
node中IO以及定时器优先级详解
May 10 Javascript
小程序自定义圆形进度条
Nov 17 Javascript
javascript作用域问题实例分析
Jul 13 #Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 #Javascript
jquery实现图片上传之前预览的方法
Jul 11 #Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 #Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 #Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 #Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 #Javascript
You might like
德生PL550的电路分析
2021/03/02 无线电
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
对python的文件内注释 help注释方法
2018/05/23 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
详解python变量与数据类型
2020/08/25 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
初三政治教学反思
2014/01/30 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
使用python创建股票的时间序列可视化分析
2022/03/03 Python
使用python求解迷宫问题的三种实现方法
2022/03/17 Python