I managed to filter results using jquery and checkboxes. My problem is when I use a style checkbox, it stops working.
Below is my code
$('input[type="checkbox"]').click(function() {
if ($('input[type="checkbox"]:checked').length > 0) {
$('.searchresults >div').fadeOut(500);
$('input[type="checkbox"]:checked').each(function() {
$('.searchresults >div[data-category=' + this.id + ']').fadeIn(600);
});
} else {
$('.searchresults >div').fadeIn(650);
}
});
this works fine when the filter is standard checkbox like this:
<input type="checkbox" id="horror" value="horror" /> Horror<br />
but fails when this is the code:
<input id="drama" type="checkbox" class="icheck" value="" />
because the class icheck modifies the html like this:
<div class="checkbox theme-search-results-sidebar-section-checkbox-list-item">
<label class="icheck-label">
<div class="icheck" style="position: relative;"><input class="icheck" type="checkbox" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
<span class="icheck-title">EWR: Newark</span>
</label>
<span class="theme-search-results-sidebar-section-checkbox-list-amount">276</span>
</div>
can anybody suggest if the same filtering can be achieved by not using checkboxes but using span id's perhaps?
Aucun commentaire:
Enregistrer un commentaire