title: jQuery best practice checkbox show/hide table rows and keep state on page refresh
body: <p>What is the best practice for writing something like this in jQuery? The script below works fine, but something tells me there’s a better.  I have a checkbox base that triggers a toggle function that hides a couple rows in a table when checked and vice-versa when unchecked. </p>
  
  <pre><code>$("#checkboxID").change(function(){     
     $("#tableID tr.rowClass").toggle(); 
  });
  </code></pre>
  
  <p>Whenever checkbox is checked and the page is refreshes the row are display which should stay hidden. I solved this issue by add this script.</p>
  
  <pre><code>if($("#checkboxID").attr("checked")){
      $("#tableID tr.rowClass").hide();
  }else{
      $("#tableID tr.rowClass").show();
  }
  $("#checkboxID").change(function(){     
     $("#tableID tr.rowClass").toggle(); 
  });
  </code></pre>
  
  <p>Is this acceptable or is there a better(proper) way of going this. Thanks i advance for your insight.</p>