jquery实现的代替传统checkbox样式插件


Posted in Javascript onJune 19, 2015

本文实例讲述了jquery实现的代替传统checkbox样式插件。分享给大家供大家参考。具体如下:

效果图如下:

jquery实现的代替传统checkbox样式插件

具体代码如下:

(function($){
  $.fn.tzCheckbox = function(options){
    // Default On / Off labels:
    options = $.extend({
      labels : ['ON','OFF']
    },options);
    return this.each(function(){
      var originalCheckBox = $(this),
        labels = [];
      // Checking for the data-on / data-off HTML5 data attributes:
      if(originalCheckBox.data('on')){
        labels[0] = originalCheckBox.data('on');
        labels[1] = originalCheckBox.data('off');
      }
      else labels = options.labels;
      // Creating the new checkbox markup:
      var checkBox = $('<span>',{
        className: 'tzCheckBox '+(this.checked?'checked':''),
        html:'<span class="tzCBContent">'+labels[this.checked?0:1]+
            '</span><span class="tzCBPart"></span>'
      });
      // Inserting the new checkbox, and hiding the original:
      checkBox.insertAfter(originalCheckBox.hide());
      checkBox.click(function(){
        checkBox.toggleClass('checked');
        var isChecked = checkBox.hasClass('checked');
        // Synchronizing the original checkbox:
        originalCheckBox.attr('checked',isChecked);
        checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);
      });
      // Listening for changes on the original and affecting the new one:
      originalCheckBox.bind('change',function(){
        checkBox.click();
      });
    });
  };
})(jQuery);

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

Javascript 相关文章推荐
js 设置选中行的样式的实现代码
May 24 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
javascript实现数字+字母验证码的简单实例
Feb 10 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
loading动画特效小结
Jan 22 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 #Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 #Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 #Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 #Javascript
使用AngularJS实现表单向导的方法
Jun 19 #Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 #Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 #Javascript
You might like
需要发散思维学习PHP
2009/06/29 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
复制粘贴功能的Python程序
2008/04/04 Python
python 输出一个两行字符的变量
2009/02/05 Python
Python实现基于权重的随机数2种方法
2015/04/28 Python
python结合API实现即时天气信息
2016/01/19 Python
Python连接PostgreSQL数据库的方法
2016/11/28 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
《金钱的魔力》教学反思
2014/02/24 职场文书
2014年质量工作总结
2014/11/22 职场文书
感谢信的格式
2015/01/21 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书