9

問題

チェックボックスがチェックされていない場合、同じセットの他のチェックボックス (同じクラス?) がチェックされている場合、そのクラスは削除されるべきではありません。チェックボックスのセットがいくつかあることに注意してください。

(部分的に)作業フィドル

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;
}
4

1 に答える 1