jquery removeClass only if all checkboxes of the same set (with same class?) are unchecked

Question

The problem

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.

(Partially) working fiddle

http://jsfiddle.net/mirluin/3MpYw/1/

Html code

<form method="get" action="#" class="taxonomy-drilldown-checkboxes">
    <div class="btn-group taxonomy-search-btn" id="terms-clipping_bu">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
            Business Units
            <span class="caret"></span>
        </a>

        <ul class="dropdown-menu">
            <li class="term-item ">
                <label>
                <input type="checkbox" name="qmt[clipping_bu][]" value="4" checked="checked" />Bu1</label>
            </li>
            <li class="term-item ">
                <label>
                <input type="checkbox" name="qmt[clipping_bu][]" value="27" checked="checked" />Bu2</label>
            </li>
            <li class="term-item ">
                <label>
                <input type="checkbox" name="qmt[clipping_bu][]" value="31" />Bu3</label>
            </li>
        </ul>
    </div>

    <div class="btn-group taxonomy-search-btn" id="terms-clipping_market">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
            Markets
            <span class="caret"></span>
        </a>

        <ul class="dropdown-menu">
            <li class="term-item ">
                <label>
                <input type="checkbox" name="qmt[clipping_market][]" value="34" />UK</label>
            </li>
            <li class="term-item current-term">
                <label>
                <input type="checkbox" name="qmt[clipping_market][]" value="57" checked="checked" />France</label>
            </li>
            <li class="term-item current-term">
                <label>
                <input type="checkbox" name="qmt[clipping_market][]" value="65" checked="checked" />Germany</label>
            </li>
        </ul>
    </div>

    <p>
        <input class="btn btn-primary" type="submit" value="Submit" /> <a class="taxonomy-drilldown-reset btn btn-info" href="#">Reset</a>
    </p>
</form>

Javascript

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');
        }
    });
});

CSS

Nothing fancy!

.btn-warning {
    background-color: #faa732;
}

Answer 1

You almost had it, you just need to check if there is any checkbox still checked when you uncheck one, instead of :

else {

    $div.removeClass('btn-warning');
}

You put

else if($ul.find('input[type="checkbox"]:checked').length == 0){

    $div.removeClass('btn-warning');
}

This will find the number of checked checkboxes in the current ul, and if it's equal to 0, will remove the class. Example here : http://jsfiddle.net/3MpYw/2/