javascript - Custom styled checkbox not working properly -

currently i'm using multiple blocks of following code custom styled checkbox:

  <div class="row-fluid">     <div class="span12 card card-even">       <div>       <h3><label class="checkbox">       <i class="icon-check-empty"></i>       <input type="checkbox" value="1" />     </label></h3>       </div>     </div>   </div> 

the js:

jquery.fn.extend({   shinycheckbox: function() {     var seticon;     seticon = function($el) {       var checkbox, iclass;       checkbox = $el.find("input[type=checkbox]");       iclass = "";       if (checkbox.is(":checked")) {         iclass = "icon-ok";       } else {         iclass = "icon-check-empty";       }       return $el.find("i[class^=icon-]").removeclass("icon-check").removeclass("icon-check-empty").addclass(iclass);     };     this.find("input[type=checkbox]").change(function() {       return seticon($(this).parents("label.checkbox"));     });     return this.each(function(i, el) {       return seticon($(el));     });   } });  $(document).ready(function() {   return $("label.checkbox").shinycheckbox(); }); 

im able achieve requirement styling icon-check-empty & icon-check classes when click checkbox first checkbox gets activated.

how can use keyword solve issue such correct checkbox activated?

this way i'd it, based on code:

jquery.fn.extend({     shinycheckbox: function () {         var seticon = function ($el) {             var checkbox = $el.find("input[type=checkbox]"), checked = checkbox.is(':checked');             checkbox.val(+checked);             return $el.find("i[class^=icon-]").removeclass("icon-check-empty icon-ok").addclass(function () {                 return checked ? "icon-ok" : "icon-check-empty";             });         };         this.find("input[type=checkbox]").on('change', function () {             return seticon($(this).closest("label.checkbox"));         });         return this.each(function (i, el) {             return seticon($(el));         });     } });  $(document).ready(function () {     $("label.checkbox").shinycheckbox(); }); 

the main issue weren't removing icon-ok class, icon-check class. cleaned code little.

here working: http://jsfiddle.net/w88fk/1/