I'm using the following example from Codepen to build a similarly complex filtering system using combination filters with search (which is a bit over my head).
This is my fork: http://ift.tt/1Fck8Cq
Problem:
I'm choosing to wrap the inputs inside labels, which stops the original behaviour from working.
Ideally when you click an "All" checkbox: sibling checkboxes will unselect. If a "Non-All" checkbox is selected, the "All" checkbox will unselect.
My labels wrapping inputs:
<div class="option-set" data-group="brand">
<label><input type="checkbox" value="" id="brand-all" class="all" checked />all brands</label>
<label><input type="checkbox" value=".brand1" id="brand1" />brand1</label>
<label><input type="checkbox" value=".brand2" id="brand2" />brand2</label>
<label><input type="checkbox" value=".brand3" id="brand3" />brand3</label>
</div>
This is the original code that's stumping me (line 167)
if ( checkbox.checked ) {
var selector = isAll ? 'input' : 'input.all';
$checkbox.siblings( selector ).removeAttr('checked');
if ( !isAll && index === -1 ) {
// add filter to group
filters[ group ].push( checkbox.value );
}
} else if ( !isAll ) {
// remove filter from group
filters[ group ].splice( index, 1 );
// if unchecked the last box, check the all
if ( !$checkbox.siblings('[checked]').length ) {
$checkbox.siblings('input.all').attr('checked', 'checked');
}
}
I can't quite figure out how to modify the siblings selector to select inputs inside of labels. Eg:
<!-- Tried this but didn't work -->
var selector = isAll ? 'label > input' : 'label > input.all';
$checkbox.parent().siblings( selector ).removeAttr('checked');
Any help would be greatly appreciated!
Aucun commentaire:
Enregistrer un commentaire