Javascript 具有多个类的jQuery条件逻辑

我有许多文章有多个类别。我对每个类别都有一个复选框。选中复选框时，应显示具有此类别的文章，否则应隐藏

到目前为止还不错

当我选中类别1，而不是类别2时，应该显示所有包含类别1的帖子。如果它们也有类别2，则无论如何都应显示它们

<input type="checkbox" value="cat1" id="checkbox1" checked />
<input type="checkbox" value="cat2" id="checkbox2" checked />
<input type="checkbox" value="cat3" id="checkbox3" checked />
<input type="checkbox" value="cat4" id="checkbox4" checked />

我为此创建了一个js小提琴

如果取消选中全部，但选中第一个复选框，则不会显示任何条目-但应显示所有cat1类的条目-即使它们有另一个未选中的类别。 如果不写几十条IF语句，我怎么能做到这一点呢？

使用jquery的：

工作示例：

使用jquery的：

工作示例：

固定代码 可以根据输入的值创建选择器

$('#catselector').on("change", function() {
  $("article").hide();
  $("input[type=checkbox]:checked", this).each(function(){
    $("article." + this.value).show();
  });
});

---

先前代码

固定代码 可以根据输入的值创建选择器

$('#catselector').on("change", function() {
  $("article").hide();
  $("input[type=checkbox]:checked", this).each(function(){
    $("article." + this.value).show();
  });
});

---

先前代码

您可以在

文章中使用（）方法。cat

复选框单击方法中的对象。

您可以在

文章中使用（）方法。cat

复选框单击方法中的对象

$('input[type="checkbox"]').on('change', function() {
    $("article.category" + this.id[this.id.length - 1]).toggle(this.checked);
});

针对所有复选框（或一个类，如果您愿意的话），从ID（数字）中获取最后一个字符，并在文章选择器中使用它，然后根据选中与否的复选框切换该文章

$('#catselector :checkbox').change(function ( e ) {
  // hide all
  $( 'article' ).hide();

  // then filter and show selected
  $( '#catselector :checked' ).each(function() {
      $( 'article.' + this.value ).show();
  });
});

针对所有复选框（或一个类，如果您愿意的话），从ID（数字）中获取最后一个字符，并在文章选择器中使用它，然后根据选中与否的复选框切换该文章

$('#catselector :checkbox').change(function ( e ) {
  // hide all
  $( 'article' ).hide();

  // then filter and show selected
  $( '#catselector :checked' ).each(function() {
      $( 'article.' + this.value ).show();
  });
});

---

谢谢您的帮助，但仍然无法满足我的需要。如果取消选中第二个复选框，则所有项目都将隐藏。但是cat1、cat3和cat4的所有文章都应该显示出来（因为这些复选框都被选中了）。是的，你做到了！谢谢谢谢谢谢，但还是不行，我需要它。如果取消选中第二个复选框，则所有项目都将隐藏。但是cat1、cat3和cat4的所有文章都应该显示出来（因为这些复选框都被选中了）。是的，你做到了！谢谢谢谢谢谢，但还是不行，我需要它。如果取消选中第二个复选框，则所有项目都将隐藏。但是cat1、cat3和cat4的所有文章都应该显示出来（因为这些复选框都被选中了），谢谢，但仍然不能像我需要的那样工作。如果取消选中第二个复选框，则所有项目都将隐藏。但是cat1、cat3和cat4的所有文章仍应显示（因为这些复选框已选中）

$('#catselector :checkbox').change(function ( e ) {
  // hide all
  $( 'article' ).hide();

  // then filter and show selected
  $( '#catselector :checked' ).each(function() {
      $( 'article.' + this.value ).show();
  });
});