Question

I am currently using

$("ul li").click(function () {
  $(this).toggleClass("checked");
         var $checkbox = $(this).find(':checkbox');
         $checkbox.prop('checked', !$checkbox[0].checked);
});

to toggle a class on checkboxes. But if I submit the form and then go back on the browser, it shows the box ticked on any checkboxes I had ticked but they no longer have the class. Is there a way to expand the above to check to see if it’s checked an apply the class?

The HTML

<ul>
  <li class="noclass">
     <input type="checkbox" name="name" />
  </li>
</ul>

Answer 1

 $(function(){
     $('input:checkbox').each(function() {
         var self = $(this);

        if(self.attr('checked')) {
            self.addClass('checked');
        }
    });
});

$('input:checkbox').live('change', function() {
    $(this).toggleClass('checked');
});

It will fix your problem 🙂

This will apply class on parent

$(function(){
     $('input:checkbox').each(function() {
         var self = $(this);

        if(self.attr('checked')) {
            self.parent().addClass('checked');
        }
    });
});

$('input:checkbox').live('change', function() {
    $(this).parent().toggleClass('checked');
});