title: Isotope.js not filtering correctly when using multiple checkboxes
body: <p>I have a simple filter which contains two <code>checkboxes</code>, one for <code>cake</code> another for <code>cupcake</code>.</p>
  <p>A user can check either option, or select both to show all results. However, even though my <code>filters</code> array contains the correct values, nothing shows.</p>
  <p>Even when filtering by one option, it doesn't showcase the correct results.</p>
  <p>See demo here:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(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 = [];
      // get checked checkboxes values
      $checkboxes.filter(':checked').each(function() {
        filters.push(this.value);
      });
      // filters = filters.join(', ');
      $grid.isotope({
        filter: filters
      });
      console.log(filters);
    });
  
  
  })(jQuery);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="shop"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
  
        &lt;!-- filter --&gt;
        &lt;div class="col-12 col-md-3"&gt;
          &lt;div class="shopFilter"&gt;
            &lt;div class="shopFilter__category"&gt;
              &lt;span class="shopFilter__category-label d-block"&gt;Type&lt;/span&gt;
              &lt;div class="shopFilter__category-options"&gt;
                &lt;div class="filterOption"&gt;
                  &lt;input class="filterOption__input isotope-trigger" type="checkbox" data-filter=".cake" name="item-cake" value="Cake" id="cake"&gt;
                  &lt;label class="filterOption__label" for="item-cake"&gt;Cake&lt;/label&gt;
                &lt;/div&gt;
                &lt;div class="filterOption"&gt;
                  &lt;input class="filterOption__input isotope-trigger" type="checkbox" data-filter=".cupcake" name="item-cupcake" value="Cupcake" id="cupcake"&gt;
                  &lt;label class="filterOption__label" for="item-cupcake"&gt;Cupcake&lt;/label&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;!-- listing --&gt;
        &lt;div class="col-12 col-md-7"&gt;
          &lt;div class="shop__grid"&gt;
            &lt;div class="productCard text-center cake"&gt;Cake&lt;/div&gt;
            &lt;div class="productCard text-center cake"&gt;Cake&lt;/div&gt;
            &lt;div class="productCard text-center cupcake"&gt;Cupcake&lt;/div&gt;
            &lt;div class="productCard text-center cake"&gt;Cake&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!----&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>