当前位置: 首页 > 编程笔记 >

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

谯灿
2023-03-14
本文向大家介绍jquery实现的代替传统checkbox样式插件,包括了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程序设计有所帮助。

 类似资料:
  • 本文向大家介绍jquery实现简洁文件上传表单样式,包括了jquery实现简洁文件上传表单样式的使用技巧和注意事项,需要的朋友参考一下 文章开始先告诉大家制作jquery实现简洁文件上传表单样式的简易教程。 效果图: 页面结构: css文件样式: javascript部分代码: 下载地址:  jquery实现简洁文件上传表单样式 希望这款简洁实用的jquery实现文件上传表单样式大家会喜欢,并可以

  • 本文向大家介绍jquery获取所有选中的checkbox实现代码,包括了jquery获取所有选中的checkbox实现代码的使用技巧和注意事项,需要的朋友参考一下 获取所有name为spCodeId的checkbox 以上这篇jquery获取所有选中的checkbox实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • 本文向大家介绍jQuery CSS3自定义美化Checkbox实现代码,包括了jQuery CSS3自定义美化Checkbox实现代码的使用技巧和注意事项,需要的朋友参考一下 效果图: 是不是比默认的好看多了,个人的审美观应该还是可以的。 接下来我们一起来看看实现这款美化版Checkbox的源代码,主要思路是利用隐藏原来的checkbox和radiobox,用一个div来模拟checkbox/ra

  • 本文向大家介绍jQuery+ajax实现实用的点赞插件代码,包括了jQuery+ajax实现实用的点赞插件代码的使用技巧和注意事项,需要的朋友参考一下 之前给大家总结了jQuery插件开发的两种方式,这里就实践一下,做一款点赞特效插件,先看看效果吧:     废话少说,上代码: 用法:在需要用到点赞插件的页面中引入jquery.js、以及这个插件.js,在$(function(){})中给"[ob

  • 本文向大家介绍c#+jquery实现获取radio和checkbox的值,包括了c#+jquery实现获取radio和checkbox的值的使用技巧和注意事项,需要的朋友参考一下 废话不多说,直接上代码 代码很简洁,却很实用,小伙伴们根据自己的项目需求改写下即可使用。

  • 本文向大家介绍JQuery fileupload插件实现文件上传功能,包括了JQuery fileupload插件实现文件上传功能的使用技巧和注意事项,需要的朋友参考一下 道理相通,我简单分享下在.net MVC下的实装。 1.制作Model类 2.实装controller里的对应方法,我这个处理逻辑比较复杂,懒得修改了,反正就这个意思 3.页面的实装 √,就是这个样子 还附赠了一个简易lodin