title: Checking all checkboxes in a table using jQuery
body: <p>My table looks like the following :</p>
  
  <pre><code>&lt;table id="tableOne" class="yui"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;
                  &lt;div&gt;&lt;input type="checkbox" /&gt;&lt;/div&gt;
              &lt;/th&gt;
              &lt;th&gt;
                  &lt;div&gt;Name&lt;/div&gt;
              &lt;/th&gt;
              &lt;th&gt;
                  &lt;div&gt;English&lt;/div&gt;
              &lt;/th&gt;
              &lt;th&gt;
                  &lt;div&gt;Spanish&lt;/div&gt;
              &lt;/th&gt;
              &lt;th&gt;
                  &lt;div&gt;Math&lt;/div&gt;
              &lt;/th&gt;
              &lt;th&gt;
                  &lt;div&gt;History&lt;/div&gt;
              &lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;div&gt;&lt;input type="checkbox" /&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div&gt;Bob Smith&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div&gt;80&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div&gt;70&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div&gt;&lt;input type="checkbox" /&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div&gt;&lt;input type="checkbox" /&gt;&lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;div&gt;&lt;input type="checkbox" /&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div&gt;George Jones&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div&gt;90&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;88&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div&gt;&lt;input type="checkbox" /&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div&gt;&lt;input type="checkbox" /&gt;&lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I am using the following javascript to check/uncheck all checkboxes in the first column on click of the checkbox in the header.</p>
  
  <pre><code>$(document).ready(function() {
      $("#tableOne thead tr th:first input:checkbox").click(function() {
          var checkedStatus = this.checked;
          $("#tableOne tbody tr td:first-child input:checkbox").each(function() {
              this.checked = checkedStatus;
          });
      });
  });
  </code></pre>
  
  <p>It isn't working. When I click on the checkbox of the header, all the checkboxes in the first column aren't getting selected. I know I am doing something wrong here. Because the <code>&lt;tr&gt;</code> tags are in <code>&lt;div&gt;</code> and I need to provide this <code>&lt;div&gt;</code> somewhere while selecting. But I can't figure out exactly where to put in this <code>div</code> in the Javascript. I have tried out a few combinations, but they don't seem to work.</p>
  
  <p>Help please. </p>
  
  <p>EDIT : I have multiple tables in HTML page and I want only this table to be affected. Also, only the checkboxes from the first column need to be checked.</p>
  
  <p>EDIT AGAIN : Sorry, My table is getting rendered in the above manner. Changed the table html.</p>