jquery implemented instead of the traditional CheckBox style plug-in _jquery

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:

(function ($) {$.fn.tzcheckbox = function (options) {//Default On/off labels:options = $.extend ({label
    s: [' 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] = O
        Riginalcheckbox.data (' on ');
      LABELS[1] = originalcheckbox.data (' off ');
      else labels = options.labels; Creating the new checkbox Markup:var checkbox = $ (' <span> ', {className: ' Tzcheckbox ' + (This.checke d? '  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);

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