title: jQuery Checkbox select all, select none and select group
body: <p>I have a form with checkboxes split into groups with a radio button group to select all and select none. The checkbox labels will get a class attached to them (for the css to make it an image). The problem I am having is that the script loops back onto itself within the conditional statement and I have been pulling my hair out trying to figure it out.</p>
  
  <p>I have created a JSFiddle page with the code here <a href="http://jsfiddle.net/jaread83/V5SSM/" rel="nofollow">http://jsfiddle.net/jaread83/V5SSM/</a></p>
  
  <p>What I want it to do:</p>
  
  <p>SelectAll is clicked, all checkbox labels get the class of 'c_on' and all checkboxes get checked.</p>
  
  <p>SelectNone is clicked, all checkbox labels have the 'c_on' class removed and all checkbox inputs get unchecked.</p>
  
  <p>When a section_label gets clicked, all checkbox labels within that section get 'c_on' and also checked and then when it is unchecked, to remove the checked status and remove the 'c_on' class from that section only.</p>
  
  <p>When a single checkbox label is clicked that isn't a section_label, that single item label gets 'c_on' class added and the checkbox gets the checked status.</p>
  
  <p>The html:</p>
  
  <pre><code>&lt;div class="form"&gt;
  &lt;div class="document"&gt;
      &lt;div class="section inline"&gt;
          &lt;label class="label_radio lightblue" id="selectAllButton" for="selectAll"&gt;
              &lt;input type="radio" name="masscheck" id="selectAll" /&gt;Select all&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="section inline"&gt;
          &lt;label class="label_radio lightblue" id="selectNoneButton" for="selectNone"&gt;
              &lt;input type="radio" name="masscheck" id="selectNone" /&gt;Select none&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="document"&gt;
      &lt;div class="section"&gt;
          &lt;label class="label_check section_label blue" for="docs_1131"&gt;
              &lt;input type="checkbox" id="docs_1131" name="docs" value="1131" /&gt;Title page&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="document"&gt;
      &lt;div class="section"&gt;
          &lt;label class="label_check section_label blue" for="docs_1118"&gt;
              &lt;input type="checkbox" id="docs_1118" name="docs" value="1118" /&gt;
              Section 1
          &lt;/label&gt;
  
          &lt;blockquote&gt;
              &lt;div class="subsection"&gt;
                  &lt;label class="label_check sub_label lightblue" for="docs_1119"&gt;
                      &lt;input type="checkbox" id="docs_1119" name="docs" value="1119" /&gt;
                      Subsection 1.1
                  &lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="subsection"&gt;
                  &lt;label class="label_check sub_label lightblue" for="docs_1120"&gt;
                      &lt;input type="checkbox" id="docs_1120" name="docs" value="1120" /&gt;
                      Subsection 1.2
                  &lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="subsection"&gt;
                  &lt;label class="label_check sub_label lightblue" for="docs_1121"&gt;
                      &lt;input type="checkbox" id="docs_1121" name="docs" value="1121" /&gt;
                      Subsection 1.3
                  &lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="subsection"&gt;
                  &lt;label class="label_check sub_label lightblue" for="docs_1122"&gt;
                      &lt;input type="checkbox" id="docs_1122" name="docs" value="1122" /&gt;
                      Subsection 1.4
                  &lt;/label&gt;
              &lt;/div&gt;
          &lt;/blockquote&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="document"&gt;
      &lt;div class="section"&gt;
          &lt;label class="label_check section_label blue" for="docs_1123"&gt;
              &lt;input type="checkbox" id="docs_1123" name="docs" value="1123" /&gt;
              Section 2
          &lt;/label&gt;
  
          &lt;blockquote&gt;
              &lt;div class="subsection"&gt;
                  &lt;label class="label_check sub_label lightblue" for="docs_1124"&gt;
                      &lt;input type="checkbox" id="docs_1124" name="docs" value="1124" /&gt;
                      Subsection 2.1
                  &lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="subsection"&gt;
                  &lt;label class="label_check sub_label lightblue" for="docs_1125"&gt;
                      &lt;input type="checkbox" id="docs_1125" name="docs" value="1125" /&gt;
                      Subsection 2.2
                  &lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="subsection"&gt;
                  &lt;label class="label_check sub_label lightblue" for="docs_1126"&gt;
                      &lt;input type="checkbox" id="docs_1126" name="docs" value="1126" /&gt;
                      Subsection 2.3
                  &lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="subsection"&gt;
                  &lt;label class="label_check sub_label lightblue" for="docs_1127"&gt;
                      &lt;input type="checkbox" id="docs_1127" name="docs" value="1127" /&gt;
                      Subsection 2.4
                  &lt;/label&gt;
              &lt;/div&gt;
          &lt;/blockquote&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;button type="submit" class="icon icon-arrow-white"&gt;Submit&lt;/button&gt;
  </code></pre>
  
  <p></p>
  
  <p>The JS:</p>
  
  <pre><code>jQuery(document).ready(function($) {
  //check all and checknone
    $('#selectAll').click(function() {
        var selectAllButton = $('#selectAllButton');
        var selectNoneButton = $('#selectNoneButton');
        var checkboxes = $(this).closest('form').find(':checkbox');
        var checklabels = $('.label_check');
        checkboxes.attr('checked', true);
        checklabels.addClass('c_on');
        selectAllButton.addClass('c_on');
        selectNoneButton.removeClass('c_on');
    });
  
    $('#selectNone').click(function() {
        var selectAllButton = $('#selectAllButton');
        var selectNoneButton = $('#selectNoneButton');
        var checkboxes = $(this).closest('form').find(':checkbox');
        var checklabels = $('.label_check');
        checkboxes.attr('checked', false);
        checklabels.removeClass('c_on');
        selectNoneButton.addClass('c_on');
        selectAllButton.removeClass('c_on');
    });
  
    //check all within section
    $('.section .section_label').click(function(){
      var p = $(this).parent();
  
      if($(this).hasClass('c_on')){
        // remove the checkbox classes on sub sections
        p.find('.subsection').find('label').removeClass('c_on');
        // remove the class from the thing we have clicked
        $(this).removeClass('c_on');
      } else {
        p.find('.subsection').find('label').addClass('c_on');
        $(this).addClass('c_on');
      }
    });
  
   });
  </code></pre>
  
  <p>Any help with this would be greatly appreciated.</p>