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 相关文章推荐
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
javascript表格的渲染组件
Jul 03 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
原生javascript实现分页效果
Apr 21 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 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的简单采集数据入库程序【续篇】
2014/07/30 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
javascript call和apply方法
2008/11/24 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
Python简单生成8位随机密码的方法
2017/05/24 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
python构建基础的爬虫教学
2018/12/23 Python
python http基本验证方法
2018/12/26 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
护士检查书
2014/01/17 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
财务管理专业求职信
2014/06/11 职场文书
2014年教师节活动总结
2014/08/29 职场文书
团代会邀请函
2015/02/02 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
工作态度检讨书范文
2015/05/06 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
mysql自增长id用完了该怎么办
2022/02/12 MySQL