Question

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

到目前为止一切顺利。

当我检查类别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 />

我使用jQuery来显示和隐藏帖子

if ($('#checkbox1').is(':checked')) {
    $("article.category1").show();
} else {
    $("article.category1").hide();
}

if ($('#checkbox2').is(':checked')) {
    $("article.category2").show();
} else {
    $("article.category2").hide();
}

if ($('#checkbox3').is(':checked')) {
    $("article.category3").show();
} else {
    $("article.category3").hide();
}

if ($('#checkbox4').is(':checked')) {
    $("article.category4").show();
} else {
    $("article.category4").hide();
}

我为此创造了一个小提琴 http://jsfiddle.net/oliverspies/t8qHT/1/

如果取消选中所有选项，但选中第一个复选框，则不会显示任何条目 - 但是应显示类cat1的所有条目 - 即使它们具有未选中的其他类别。如果不编写数十个IF语句，我怎么能这样做？

Answer 1

固定代码

您可以根据输入值创建选择器。

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

See it here.

以前的代码

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

Answer 2

使用jquery的toggle function：

$('#checkbox1').click(function() {
  $("article.cat1").toggle();
});
$('#checkbox2').click(function() {
  $("article.cat2").toggle();
});
...

工作示例：http://jsfiddle.net/SCGyY/

Answer 3

您可以在复选框点击方法中的article.cat个对象上使用jQuery.toggle（）方法。

Answer 4

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

定位所有复选框（如果您愿意，可以定位一个类）并从ID中获取最后一个字符（数字）并在文章选择器中使用它，并根据要检查的复选框切换该文章。 / p>

Answer 5

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

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

http://jsfiddle.net/t8qHT/14/

具有多个类的jQuery条件逻辑

5 个答案:

固定代码

以前的代码