How to keep a class hidden even if toggled, with checkboxes

I have encountered a problem..

I'm trying to create a filtering system for a list of elements. Each elements has different classes. For example, each element has a class for its shape and one for its color. for example:

<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">

On the navbar, I would have checkboxes used to show-hide each element as follows:

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

And here is the function I have so far:

$(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);
    });

});

Say the square checkbox and the blue checkbox are checked, how would I prevent the red circle to show up if I decided to check the red checkbox?

Here is a working example http://ift.tt/1DRRybH