本文实例讲述了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 = $('',{ classname: 'tzcheckbox '+(this.checked?'checked':''), html:''+labels[this.checked?0:1]+ '' }); // 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程序设计有所帮助。