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

任何人都可以建议是否可以通过不使用复选框但使用 span id 来实现相同的过滤？

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);
   }
});