javascript - How can I make this jQuery play nice with browser "back" buttons? -

i'm not @ jquery or javascript in general, i've managed cobble something. please bear me, , forgive ignorance.

fiddle 1

$(document).ready(function () { $('#searchresults tr').click(function (event) {     if (event.target.type !== 'checkbox') {         $(':checkbox', this).trigger('click');     } });  $("input[type='checkbox']").change(function (e) {     if ($(this).is(":checked")) {         $(this).closest('tr').addclass("active");     } else {         $(this).closest('tr').removeclass("active");     } }); }); 

basically i've set jquery allow users click anywhere in table row, select check box in first column of row. , when box gets checked, adds css class whole row. works in reverse, unchecking checkbox, , removing css class. works great far.

where fails when selects few rows , submits form, navigating next page in website, realizes they've made mistake , hit browser button table selections. when that, browser restores checkboxes correctly, css classes not set rows. ends looking this:

fiddle 2

$(document).ready(function () {     $('#searchresults tr').click(function (event) {         if (event.target.type !== 'checkbox') {             $(':checkbox', this).trigger('click');         }     });      $("input[type='checkbox']").change(function (e) {         if ($(this).is(":checked")) {             $(this).closest('tr').addclass("active");         } else {             $(this).closest('tr').removeclass("active");         }     }); }); 

box checked, row isn't highlighted should be.

i'm sure they're simple jquery way search checked checkboxes on page load, , apply css @ time, can't seem figure out.

any appreciated! thanks.

there number of ways

you can loop through table data check input checked , add class

demo

http://jsfiddle.net/v6xebjsw/

code

$("td").each(function() {  if ( $("input[type='checkbox']", this).is(":checked")) { $(this).closest('tr').addclass("active");   } }); 

you can use find checked using tables id

demo

http://jsfiddle.net/taoza74x/

code

$("#searchresults").find(":checked").closest('tr').addclass("active"); 

but easiest way use selector input checked

demo

http://jsfiddle.net/9uggkcxy/

code

$("input:checked").closest('tr').addclass("active"); 

or use has method

demo

http://jsfiddle.net/4h12v3tn/

code

$("tr").has("input:checked").addclass("active"); 

the code can way too

$("tr:has(input:checked)").addclass("active");