title: jQuery / JavaScript: Check all checkboxes and Check each checkbox to display div
body: <p>I am having a hard time figuring this out. I tried to make a global checkbox that will check all other sub-checkboxes and display a div, which works fine, but the issue is when i try to make each sub-checkboxes check and display the div themselves.</p>
  
  <p>I wrote jquery hide and show for it.</p>
  
  <p>When I check the first sub-checkbox, and check the second; the div displays but when i go back and uncheck the first one, the div closes and one and on due to the hide and show function, how can i do this?</p>
  
  <p>Here is my code below.</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
      $('#checkbox-global').click(function(){
          if($(this).is(':checked'))
              $('.checkbox-group').prop('checked', true);
          else
              $('.checkbox-group').prop('checked', false);
      });
  });
  
  $(document).ready(function(){
      $('#checkbox-global').click(function(){
          if($(this).is(':checked'))
              $('.loaded').show(1000);
          else
              $('.loaded').hide(1000);
      });
  });
  
  $(document).ready(function(){
      $('.checkbox-group').click(function(){
          if($(this).is(':checked'))
              $('.loaded').show(1000);
          else
              $('.loaded').hide(1000);
      });
  });
  </code></pre>
  
  <p></p>
  
  <pre><code>     &lt;!-- The Div --&gt;
        &lt;div class="loaded"&gt;RESTORE | DELETE&lt;/div&gt;
  
      &lt;!-- The Global Checkbox --&gt;
      &lt;input type="checkbox" id="checkbox-global" class="checkbox-group"&gt;
      &lt;br&gt;
  
      &lt;!-- The Sub-checkboxes --&gt;
      &lt;input type="checkbox" class="checkbox-group"&gt;
      &lt;input type="checkbox" class="checkbox-group"&gt;
      &lt;input type="checkbox" class="checkbox-group"&gt;
      &lt;input type="checkbox" class="checkbox-group"&gt;
      &lt;input type="checkbox" class="checkbox-group"&gt;
      &lt;input type="checkbox" class="checkbox-group"&gt;
      &lt;input type="checkbox" class="checkbox-group"&gt;
  </code></pre>