在jQuery中使用复选框过滤，但所有类都必须符合条件

<input type="checkbox" class="filter-checkbox" value="category1"> Category 1
<input type="checkbox" class="filter-checkbox" value="category2"> Category 2
<input type="checkbox" class="filter-checkbox" value="category3"> Category 3

$('.filter-checkbox').on('change', function() {
  var selectedCategories = [];

  // 获取所有选中的复选框的值
  $('.filter-checkbox:checked').each(function() {
    selectedCategories.push($(this).val());
  });

  // 如果没有选中任何复选框，则显示所有元素
  if (selectedCategories.length === 0) {
    $('.element').show();
    return;
  }

  // 遍历所有元素，根据选中的复选框过滤并显示符合条件的元素
  $('.element').each(function() {
    var categories = $(this).data('categories').split(',');

    // 检查该元素的类别是否包含选中的复选框的值
    var isMatch = selectedCategories.every(function(category) {
      return categories.includes(category);
    });

    // 根据匹配结果显示或隐藏元素
    if (isMatch) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});

<div class="element" data-categories="category1">Element 1</div>
<div class="element" data-categories="category2">Element 2</div>
<div class="element" data-categories="category1,category3">Element 3</div>