0

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

到现在为止还挺好。

当我检查第 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/创建了一个js小提琴

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

4

5 回答 5

4

固定代码

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

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

看这里。

以前的代码

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

于 2013-01-06T19:35:18.130 回答
0

使用 jquery 的切换功能：

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

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

于 2013-01-06T19:35:16.877 回答
0

您可以在复选框的 click 方法内的对象上使用jQuery.toggle ()方法。article.cat

于 2013-01-06T19:37:37.257 回答
0 
$('input[type="checkbox"]').on('change', function() {
    $("article.category" + this.id[this.id.length - 1]).toggle(this.checked);
});

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

于 2013-01-06T19:39:42.543 回答
0 
$('#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/

于 2013-01-06T19:46:30.033 回答