title: Show/Hide All or Toggle Multiple divs With One Checkbox
body: <p>Forgive me if this topic has been overdone. I've read through lots of posts and haven't quite found what I'm looking for, which is why I'm asking.</p>
  
  <p><strong>I want to have one checkbox that says "Show All" and when you check it multiple divs show. When you uncheck it, the divs hide</strong></p>
  
  <p>I was able to show/hide one div with an id using a checkbox, but I'm not sure how to use a class element so I don't have to write out every div id. This is the code I was using:</p>
  
  <pre><code>&lt;input type="checkbox" id="checkbox"&gt;Show All
  &lt;div id="links"&gt;&lt;a href="#"&gt;Link Title&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>AND</p>
  
  <pre><code>$(document).ready(function () {
  
      $('#link').hide();
  
  
      $('#checkbox').change(function () {
          if (!this.checked) 
          //  ^
             $('#links').fadeOut('slow');
          else 
              $('#links').fadeIn('slow');
      });
  });
  </code></pre>
  
  <p>How do I approach this with the javascript so I can show multiple divs on one checkbox click? Maybe with a class like this:</p>
  
  <pre><code>&lt;input type="checkbox" id="checkbox"&gt;Show All
  &lt;div class="links"&gt;&lt;a href="#"&gt;Link Title&lt;/a&gt;&lt;/div&gt;
  &lt;div class="links"&gt;&lt;a href="#"&gt;Link Title&lt;/a&gt;&lt;/div&gt;
  &lt;div class="links"&gt;&lt;a href="#"&gt;Link Title&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Thanks!</p>