jquery removeClass仅当取消选中同一组（具有相同的类？）的所有复选框时

Question

问题

如果未选中复选框，如果选中同一组（具有相同类？）的其他复选框，则不应删除该类。 请注意有几组复选框。

（部分）工作小提琴

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

Html代码

<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

没什么好看的！

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

Answer 1

你几乎拥有它，你只需要在取消选中时检查是否仍有任何复选框，而不是：

else {

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

你把

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

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

这将在当前ul中找到已选中复选框的数量，如果它等于0，则将删除该类。示例：http://jsfiddle.net/3MpYw/2/