title: jquery checkbox change event not firing upon first-time click
body: <p>I need to hide a few things when a checkbox is checked, and show them when checkbox is unchecked. I use a class selector to go through the documents and hide these elements.</p>
  
  <p>The code seems to work, the only problem is each time the page is loaded, when I check it, the change event does not fire. I have to un-check, then check again, then the event fires. Please help me see what I did wrong.</p>
  
  <pre><code>        &lt;script type="text/javascript"&gt;
              $(document).ready(function () {
                  $('#chkFiles').change(function () {
                      if (this.checked)
                          $(".hideWhenChecked").hide();
                      else
                          $(".hideWhenChecked").show();
                  });
              });
      &lt;/script&gt;
  </code></pre>
  
  <p>The elements to be hidden are like this:</p>
  
  <pre><code>    &lt;TR&gt;
          &lt;TD style="WIDTH: 144px" width="144"&gt;&lt;span class="hideWhenChecked"&gt;Select:&lt;/span&gt;&lt;/TD&gt;
          &lt;TD&gt;&lt;span class="hideWhenChecked"&gt;&lt;asp:dropdownlist id="ddl" runat="server" AutoPostBack="True"&gt;&lt;/asp:dropdownlist&gt;&lt;/span&gt;&lt;/TD&gt;
  &lt;/TR&gt;
  </code></pre>
  
  <p>Our jquery library is 1.4.1, it's old, but it's not up to me to make the decision to update it. Some functionality are not available in this version.</p>