Jquery: setting div hide / show with checkbox checking initial state
<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>
