如何使用复选框保持类隐藏，即使切换也是如此

Question

我遇到了一个问题。

我正在尝试为元素列表创建一个过滤系统。每个元素都有不同的类。例如，每个元素都有一个用于其形状的类和一个用于其颜色的类。例如：

<img class="Square Red" src="Bearwithme.jpeg">
<img class="Square Blue" src="Bearwithme.jpeg">
<img class="Circle Red" src="Bearwithme.jpeg">
<img class="Circle Blue" src="Bearwithme.jpeg">

在导航栏上，我将使用复选框来显示隐藏每个元素，如下所示：

 <input id="Squares" type="checkbox">
    <input id="Circles" type="checkbox">
    <input id="Red" type="checkbox">
    <input id="Blue" type="checkbox">

这是我到目前为止的功能：

$(document).ready(function(){
    $("#Red").click(function(){
    $(".Red").toggle(this.checked);
    });
    $("#Blue").click(function(){
    $(".Blue").toggle(this.checked);
    });
    $("#Circle").click(function(){
    $(".Circle").toggle(this.checked);
    });
    $("#Square").click(function(){
    $(".Square").toggle(this.checked);
    });
});

假设选中了方形复选框和蓝色复选框，如果我决定选中红色复选框，我将如何防止红色圆圈出现？

这是一个工作示例 http://jsfiddle.net/JB3kM/1/

Answer 1

看看这个小提琴。

我会说你最好的做法是获取所有复选框的值，显示所有元素，然后隐藏那些不满足所有条件的元素。

$("input[type='checkbox']").click(function(){
    var red = $("input#Red").prop("checked");
    var blue = $("input#Blue").prop("checked");
    var sq = $("input#Squares").prop("checked");
    var cir = $("input#Circles").prop("checked");
    //Toggle all on
    $("div.red, div.square, div.blue, div.circle").show();
    //Toggle off
    if(!red)
        $("div.red").hide();
    if(!blue)
        $("div.blue").hide();
    if(!sq)
        $("div.square").hide();
    if(!cir)
        $("div.circle").hide();
});