title: jquery removeClass only if all checkboxes of the same set (with same class?) are unchecked
body: <h2>The problem</h2>
  
  <p>When a checkbox is unchecked, if other checkboxes of the same set (with same class?) are checked, the class shouldn't be removed.
  Please notice there are several sets of checkboxes.</p>
  
  <h2>(Partially) working fiddle</h2>
  
  <p><a href="http://jsfiddle.net/mirluin/3MpYw/1/" rel="nofollow">http://jsfiddle.net/mirluin/3MpYw/1/</a></p>
  
  <h2>Html code</h2>
  
  <pre><code>&lt;form method="get" action="#" class="taxonomy-drilldown-checkboxes"&gt;
      &lt;div class="btn-group taxonomy-search-btn" id="terms-clipping_bu"&gt;
          &lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
              Business Units
              &lt;span class="caret"&gt;&lt;/span&gt;
          &lt;/a&gt;
  
          &lt;ul class="dropdown-menu"&gt;
              &lt;li class="term-item "&gt;
                  &lt;label&gt;
                  &lt;input type="checkbox" name="qmt[clipping_bu][]" value="4" checked="checked" /&gt;Bu1&lt;/label&gt;
              &lt;/li&gt;
              &lt;li class="term-item "&gt;
                  &lt;label&gt;
                  &lt;input type="checkbox" name="qmt[clipping_bu][]" value="27" checked="checked" /&gt;Bu2&lt;/label&gt;
              &lt;/li&gt;
              &lt;li class="term-item "&gt;
                  &lt;label&gt;
                  &lt;input type="checkbox" name="qmt[clipping_bu][]" value="31" /&gt;Bu3&lt;/label&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="btn-group taxonomy-search-btn" id="terms-clipping_market"&gt;
          &lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
              Markets
              &lt;span class="caret"&gt;&lt;/span&gt;
          &lt;/a&gt;
  
          &lt;ul class="dropdown-menu"&gt;
              &lt;li class="term-item "&gt;
                  &lt;label&gt;
                  &lt;input type="checkbox" name="qmt[clipping_market][]" value="34" /&gt;UK&lt;/label&gt;
              &lt;/li&gt;
              &lt;li class="term-item current-term"&gt;
                  &lt;label&gt;
                  &lt;input type="checkbox" name="qmt[clipping_market][]" value="57" checked="checked" /&gt;France&lt;/label&gt;
              &lt;/li&gt;
              &lt;li class="term-item current-term"&gt;
                  &lt;label&gt;
                  &lt;input type="checkbox" name="qmt[clipping_market][]" value="65" checked="checked" /&gt;Germany&lt;/label&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;p&gt;
          &lt;input class="btn btn-primary" type="submit" value="Submit" /&gt; &lt;a class="taxonomy-drilldown-reset btn btn-info" href="#"&gt;Reset&lt;/a&gt;
      &lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  
  <h2>Javascript</h2>
  
  <pre><code>jQuery(document).ready(function ($) {
  
      // verify if any checkboxes are checked, if so highlight the dropdown link
      $(':checkbox:checked').each(function () {
  
          var $check = $(this),
          $ul = $check.parents('ul.dropdown-menu'),
          $div = $ul.siblings('a.btn.dropdown-toggle');
  
          if ($check.prop('checked')) {
              $div.addClass('btn-warning');
          }
      });
  
      // on every click on checkboxes...
      $('.taxonomy-drilldown-checkboxes input[type=checkbox] ').change(function () {
  
          var $check2 = $(this),
          $ul = $check2.parents('ul.dropdown-menu'),
          $div = $ul.siblings('a.btn.dropdown-toggle');
  
          // if adding a checkbox highlight the dropdown link 
          if ($check2.prop('checked')) {
  
              $div.addClass('btn-warning');
  
              // if removing a checkbox, remove the class
              // only if all checkboxes *of the same set* are unchecked too
          } else {
  
              $div.removeClass('btn-warning');
          }
      });
  });
  </code></pre>
  
  <h2>CSS</h2>
  
  <p>Nothing fancy!</p>
  
  <pre><code>.btn-warning {
      background-color: #faa732;
  }
  </code></pre>