mercredi 26 février 2020

Filtering data WITHOUT checkboxes using jquery

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