title: Showing and hiding divs if checkbox is selected
body: <p>I have several checkboxes in different places on the page. When one of those checkboxes is selected then the div underneath it should disappear signaling that they do not wish to upload any files. </p>
  
  <p>I can get this to work with a checkbox, but my issue comes when there are many of them since I am calling the same class to make this work because I am trying to make this as dynamic as possible. Mainly so I don't have to write a separate function for each checkbox.</p>
  
  <pre><code>&lt;div class="className"&gt;
      &lt;p class="mailCheck "&gt;&lt;input type="checkbox" value="1" class="checkbox-select" id="questionnaire-check" &lt;span&gt;I dont wish to upload files at this time.&lt;/span&gt;&lt;/p&gt;
  
      &lt;div class="hideDiv hideUpload"&gt;
          &lt;p&gt;Upload box I wish to hide.&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the jquery I have been playing with.</p>
  
  <p>I have tried a few things here. First, I had just the if statement which worked when the user refreshed and then I had the click function. But neither seemed to work on individual checkboxes, just the group as whole.</p>
  
  <pre><code>if($('.mailCheck input:checked').length == 1){
          $(this).closest('div').find('.hideUpload').hide();
      }else {
          $(this).closest('div').find('.hideUpload').show();
      }
  
      $('.mailCheck input').on('click', function(){
          if($('.mailCheck input:checked').length == 1){
              $(this).closest('div').find('.hideUpload').slideUp();
          }else {
              $(this).closest('div').find('.hideUpload').slideDown();
          }
      });
  </code></pre>
  
  <p>So then I tried to put the above code in a <code>.each</code> function, but that just seemed to mess up how the click function was supposed to work.</p>
  
  <pre><code>$('.mailCheck input').each(function() {
  
  });
  </code></pre>
  
  <p>So I tried to take the click function out of the each function, but that didn't seem to help either. I'm probably making this way more complex than needed. Any help would be appreciated!</p>
  
  <p>A jsFiddle to try and visualize what I am trying to do <a href="http://jsfiddle.net/gDp8z/3/" rel="nofollow">http://jsfiddle.net/gDp8z/3/</a></p>