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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
jquery 插件开发方法小结
Oct 23 Javascript
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
JQuery validate插件验证用户注册信息
May 11 Javascript
详解ES6中的let命令
Apr 05 Javascript
微信小程序 地图map详解及简单实例
Jan 10 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
小程序实现tab标签页
Nov 16 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数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
php中通过curl检测页面是否被百度收录
2013/09/27 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
使用python开发vim插件及心得分享
2014/11/04 Python
python编写的最短路径算法
2015/03/25 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
python入门教程 python入门神图一张
2018/03/05 Python
python实现屏保计时器的示例代码
2018/08/08 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
创业计划书撰写原则
2014/01/25 职场文书
委托书的写法
2014/09/16 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
教师年度个人总结
2015/02/11 职场文书
小学中队活动总结
2015/05/11 职场文书
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript