Фильтрация данных БЕЗ флажков с использованием jquery

Question

Мне удалось отфильтровать результаты, используя jquery и флажки. Моя проблема, когда я использую флажок стиля, он перестает работать.

Ниже приведен мой код

$('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);

}
});

, это нормально работает, когда фильтр установлен в стандартном флажке, например:

<input type="checkbox" id="horror" value="horror" /> Horror<br />

, но не работает, когда этот код:

<input id="drama" type="checkbox" class="icheck" value="" />

, поскольку класс icheck изменяет html следующим образом:

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

Кто-нибудь может подсказать, можно ли добиться такой же фильтрации, не используя флажки, но, возможно, используя идентификатор диапазона?

Answer 1

Вы можете добиться этого, используя обработчик событий change вместо обработчика событий щелчка и использовать селектор class=icheck jquery для более точного результата.

см. Код ниже

$('input[type="checkbox"].icheck').on('change', function() {
   var $checked = $('input[type="checkbox"].icheck:checked');
   if ($checked.length > 0) {
        $('.searchresults >div').fadeOut(500);
        $checked.each(function() {
           $('.searchresults  >div[data-category=' + this.id + ']').fadeIn(600);
        });
   } else {
      $('.searchresults >div').fadeIn(650);
   }
});