Javascript 仅显示类名等于jQuery中多个选中复选框值的项

我想创建一个过滤系统，只有类名等于选中复选框值的文章才会显示。 用户可以选择多个cb，结果应仅为这些文章

我知道如何显示具有相同选中复选框值的文章，但当选中多个复选框时，仍会显示不包含其中一个cb值的文章，因此我尝试使其更智能。 到目前为止没有运气

编辑链接：--更改了链接，以便其他人也可以查看

jQuery代码：

$("#filters :checkbox").click(function() { // if click on a checkbox
    $(".widget-lijst article").hide(); // hide all the items first

    var valCB = $(this).val() // value of the checkbox;

    $("#filters :checkbox:checked").each(function() {
        var valObj = $("." + $(this).val()); // value of the object
        var $allClasses = valObj.attr('class').split(' '); // splits every class in a object

        console.log(valObj);

        for(var i=0; i < $allClasses.length; i++) {

            if($allClasses == valCB) {

                console.log('true');

            } else {

                console.log('false');
            }
        }
    });
});

$（“#过滤器：复选框”）。单击（函数（）{//如果单击复选框
$（“.widget lijst article”）.hide（）；//首先隐藏所有项目
var valCB=$（this）.val（）//复选框的值；
$（“#过滤器：复选框：选中”）。每个（函数（）{
var valObj=$（“+$（this.val（））；//对象的值
var$allClasses=valObj.attr（'class'）.split（''）；//拆分对象中的每个类
控制台日志（valObj）；
对于（变量i=0；i<$allClasses.length；i++）{
如果（$allClasses==valCB）{
console.log（'true'）；
}否则{
console.log（'false'）；
}
}
});
});

HTML代码：

<ul id="filters">
  <li>Type
    <ul>
      <li><input type="checkbox" value="category-sc" id="sc" /><label for="category-sc">Site content</label></li>
      <li><input type="checkbox" value="category-va" id="va" /><label for="category-va">Visitor accelerator</label></li>
      <li><input type="checkbox" value="category-ad" id="ad" /><label for="category-ad">Ad only</label></li>
    </ul>
  </li>
</ul> 

类型

网站内容
访客加速器
仅广告

这些项目是由Wordpress帖子创建的。
Ajaxshowtime拥有“分类sc”
Babes Panorama有“va类”课程
博蒙德两者兼备

所以理想的情况是，当同时选择了访问者加速器和站点内容时，只有博蒙德会显示。

$（document）.ready（function（））{
$(document).ready(function(){
    $('input:checkbox').click(function(){
        var value = $(this).val();
        $('.'+value).toggle();
    });
});

.category {
    width: 100px;
    height: 100px;
    background: #ccc;
    border: 1px solid;
    margin: 10px;
    padding: 10px;
    float: left;
    display: none;
}

<div>
    <input type="checkbox" name="article" value="category01"> Category 01
    <input type="checkbox" name="article" value="category02"> Category 02
    <input type="checkbox" name="article" value="category03"> Category 03
    <input type="checkbox" name="article" value="category04"> Category 04
</div>
<div>
    <div class="category category01">
        Article category01
    </div>
    <div class="category category01">
        Article category01
    </div>
    <div class="category category01">
        Article category01
    </div>
    <div class="category category01">
        Article category01
    </div>
    <div class="category category02">
        Article category02
    </div>
    <div class="category category02">
        Article category02
    </div>
    <div class="category category02">
        Article category02
    </div>
    <div class="category category03">
        Article category03
    </div>
    <div class="category category03">
        Article category03
    </div>
    <div class="category category04">
        Article category04
    </div>
</div>

$（'input:checkbox'）。单击（函数（）{
var值=$（this.val（）；
$（'..+值）.toggle（）；
});
});
.类别{
宽度：100px；
高度：100px；
背景：#ccc；
边框：1px实心；
利润率：10px；
填充：10px；
浮动：左；
显示：无；
}
类别01
类别02
类别03
类别04
第1条类别
第1条类别
第1条类别
第1条类别
物品类别02
物品类别02
物品类别02
物品类别03
物品类别03
第4条类别

这可能会解决你的问题。请检查这个

---

您可以尝试以下方法（我在代码中添加了注释）

$（“#过滤器：复选框”）.change（函数（）{//如果复选框状态更改（如果单击标签）
$（“.widget lijst article”）.hide（）；//首先隐藏所有项目
变量选择器=“”；//创建一个选择器
$（“#过滤器：复选框：选中”）。每个（函数（）{
选择器+='.+$（this）.val（）；//将所选值附加到选择器（没有空格，因此如果有多个类，则会合并类）
});
$（选择器）.show（）；//显示匹配的项目
});您好，不幸的是，对于我的html代码，这不会显示具有相同类名的文章。当选择一个项目时，它只会显示一个项目，而它至少会显示两个项目。在脚本中，您有一个代码可以先隐藏所有项目。我是说这篇$（“.widget lijst article”）.hide（）。请避免这样，在我的例子中。它显示了所有选中复选框的文章。我复制了你的代码并替换了它，但皮特设法给出了我想要的。无论如何，谢谢你：）哇，它似乎在工作！我将添加更多的帖子和过滤选项，看看它是否能继续工作。不幸的是，我可以在几个小时后这样做，但我肯定会回来接受你的回答。