从多滤波器到单滤波器

<div class="filter-buttons gen-width sidebar hidden-xs">
    <form id="filters">
      <% @categories.each do |categ| %>
        <div class="category-list">
          <input type="checkbox" name='<%= categ %>' id='<%= categ %>'>
          <label class="index-category" for='<%= categ %>'>
            <% if categ == "Social Media" %>
              <i class="fa fa-twitter margin-right-10" aria-hidden="true"></i>
            <% elsif categ == "Content" %>
              <i class="fa fa-pencil margin-right-10" aria-hidden="true"></i>
            <% elsif categ == "Research" %>
              <i class="fa fa-flask margin-right-10" aria-hidden="true"></i>
            <% else %>
              <i class="fa fa-object-group margin-right-5" aria-hidden="true"></i>
            <% end %>
          <%= categ %>
          </label>
        </div>
      <% end %>
    </form>
  </div>
  

$(document).ready(function() {
  $('#filters input:checkbox').change(function () {
    var selectedCategoryNames = $('#filters input:checkbox:checked').map(function () {
      return $(this).attr('name')
    }).toArray();  

    cards = $('.selectable-card');
    cards.hide()
    cards.each(function() {
      if (selectedCategoryNames.includes($(this).attr('data-category'))) $(this).delay(100).fadeIn(300);
    });

    if (selectedCategoryNames.length === 0) cards.show();
  });
});