jquery removeClass 仅当同一组(具有相同类？)的所有复选框均未选中时

Question

问题

当取消选中某个复选框时，如果选中同一组(具有相同类？)的其他复选框，则不应删除该类。请注意有几组复选框。

(部分)工作 fiddle

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/