title: jquery select all checkboxes
body: <p>I have a series of checkboxes that are loaded 100 at a time via ajax.</p>
  
  <p>I need this jquery to allow me to have a button when pushed check all on screen. If more are loaded, and the button is pressed, to perhaps toggle all off, then pressed again toggle all back on.</p>
  
  <p>This is what i have, obviously its not working for me.</p>
  
  <pre><code>$(function () {
   $('#selectall').click(function () {
    $('#friendslist').find(':checkbox').attr('checked', this.checked);
   });
  });
  </code></pre>
  
  <p>The button is <code>#selectall</code>, the check boxes are class <code>.tf</code>, and they all reside in a parent div called <code>#check</code>, inside a div called <code>#friend</code>, inside a div called <code>#friendslist</code></p>
  
  <p>Example:</p>
  
  <pre><code>&lt;div id='friendslist'&gt;
      &lt;div id='friend'&gt;
          &lt;div id='check'&gt;
              &lt;input type='checkbox' class='tf' name='hurr' value='durr1'&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id='friend'&gt;
          &lt;div id='check'&gt;
              &lt;input type='checkbox' class='tf' name='hurr' value='durr2'&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id='friend'&gt;
          &lt;div id='check'&gt;
              &lt;input type='checkbox' class='tf' name='hurr' value='durr3'&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;input type='button' id='selectall' value="Select All"&gt;
  </code></pre>