Isotope.js多checkbox筛选异常无法正确展示匹配结果

API 探路者

2026-8-27

问题根因

筛选完全失效是三个写法错误导致的：

读取筛选规则时取了checkbox的value属性（值为大写开头的Cake/Cupcake），但商品卡片绑定的筛选类是全小写的.cake/.cupcake，匹配规则完全对不上。
Isotope的多分类「或逻辑」筛选不支持直接传入数组参数，必须拼接为逗号分隔的CSS选择器字符串，你代码里把拼接逻辑注释掉了。
复选框和对应label的id、for属性值不匹配，点击文字标签无法触发勾选，属于附带的交互bug。

修复方案

替换JS逻辑

将原有复选框change事件的代码替换为如下内容：

(function($) {
  var $grid = $('.shop__grid'),
    $checkboxes = $('.isotope-trigger');

  $grid.isotope({
    itemSelector: '.productCard',
    layoutMode: 'fitRows'
  });

  $grid.imagesLoaded().progress(function() {
    $grid.isotope('layout');
  });

  $checkboxes.change(function() {
    var filters = [];
    // 直接读取存在data-filter属性上的正确类选择器
    $checkboxes.filter(':checked').each(function() {
      filters.push($(this).data('filter'));
    });
    // 无勾选时传入*显示全部商品，有勾选则拼接为Isotope支持的选择器格式
    var filterRule = filters.length ? filters.join(', ') : '*';
    $grid.isotope({
      filter: filterRule
    });
  });
})(jQuery);

修正HTML标签关联属性

调整两个label标签的for属性值，和对应input的id保持一致：

<div class="filterOption">
  <input class="filterOption__input isotope-trigger" type="checkbox" data-filter=".cake" name="item-cake" value="Cake" id="cake">
  <label class="filterOption__label" for="cake">Cake</label>
</div>
<div class="filterOption">
  <input class="filterOption__input isotope-trigger" type="checkbox" data-filter=".cupcake" name="item-cupcake" value="Cupcake" id="cupcake">
  <label class="filterOption__label" for="cupcake">Cupcake</label>
</div>