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