Question

I’m using custom images for the appearance of checkboxes and hiding the real checkboxes. My form has 2 parts, so if I make a selection of checkboxes, then go to the next part/page of the form, then click the browsers back button, the hidden checkboxes are still selected, but the images/classes are reset so it appears that the checkboxes are not selected.

var $checkStyle    = $('<span class="check-style"></span>'),
    $product       = $('.productBox'),
    $checkBox      = $('#webform-client-form-18070 .form-checkbox');

    $checkBox.hide();
    $checkStyle.appendTo('.selectCheck');

    $product.click(function(){
        var $this        = $(this),
            $checkSingle = $this.find('.check-style'),
            $checkbox    = $this.find(':checkbox');

        $checkSingle.toggleClass('check-style-selected');
        $checkbox.attr('checked', !$checkbox.attr('checked'));
});

The .check-style-selected class is what shows the checked checkbox image. How do I keep that class on the element when the browsers back button is clicked?

Thanks.

Answer 1

why not:

$(":checkbox").each(function(){
    if ($(this).is(":checked") { 
       $(this).addClass("checked")
   } else { $(this).addClass("unchecked") }
})