jquery implemented instead of traditional checkbox style Plug-ins

This article illustrates the substitution of the traditional checkbox style Plug-ins implemented by jquery. Share to everyone for your reference. Specifically as follows:

The effect chart is as follows:

The specific code is as follows:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 The 23 24 25 26 27 28 29 30 31 32 33 34 35 36

(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 dat A 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.cl Ick (); }); }); }; }) (JQuery);

I hope this article will help you with your jquery programming.