title: Jquery: setting div hide / show with checkbox checking initial state
body: <p>I am trying to hide divs when the associated checkbox is checked. </p>
  
  <p>To get it to work with the initial jstate of the checkbox I added triggerHandler('click').</p>
  
  <p>This works fine for the first checkbox but not for any others.</p>
  
  <p>Any suggestions?</p>
  
  <p>Fiddle here: <a href="http://jsfiddle.net/tb5Yt/100/" rel="nofollow">http://jsfiddle.net/tb5Yt/100/</a></p>
  
  <p>Many thanks.</p>
  
  <p>HTML</p>
  
  <pre><code>1&lt;input type = "checkbox" id = "1" checked&gt;
  2&lt;input type = "checkbox" id = "2" &gt;
  3&lt;input type = "checkbox" id = "3" checked&gt;
  
  &lt;div class = "1"&gt;
    //Contains 1 elements remove when checked
  &lt;/div&gt;
  
  &lt;div class = "2"&gt;
    //Contains 2 elements remove when checked
  &lt;/div&gt;
  
  &lt;div class = "3"&gt;
    //Contains 3 elements remove when checked
  &lt;/div&gt;
  </code></pre>
  
  <p>Jquery</p>
  
  <pre><code>$(document).ready(function() {
  
  $("input[type=checkbox]").click(function()
  
  {
      divId = $(this).attr("id");
  
      if ($(this).is(":checked")) {
          $("." + divId).hide();
      }
      else if ($(this).not(":checked")) {
          $("." + divId).show();
      }
  
  }).triggerHandler('click');
  
  });
  </code></pre>