jeudi 5 février 2015

Isotope Filtering Checkbox Behaviour - Can't Get Working Properly

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