jQuery conditional logic with multiple classes
<p>I have many articles which have multiple categories. I have a checkbox for every category. When a checkbox is checked the articles with this category should be shown, otherwise should be hidden.</p>

<p>So far so good.</p>

<p>When I check category 1, but not category 2 all posts should be shown which have category 1. If they have category 2 too they should be shown anyway.</p>

<pre><code>&lt;input type="checkbox" value="cat1" id="checkbox1" checked /&gt;
&lt;input type="checkbox" value="cat2" id="checkbox2" checked /&gt;
&lt;input type="checkbox" value="cat3" id="checkbox3" checked /&gt;
&lt;input type="checkbox" value="cat4" id="checkbox4" checked /&gt;
</code></pre>

<p>I use jQuery to show and hide the posts</p>

<pre><code>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();
}
</code></pre>

<p>I created a js fiddle for this
<a href="http://jsfiddle.net/oliverspies/t8qHT/1/" rel="nofollow">http://jsfiddle.net/oliverspies/t8qHT/1/</a></p>

<p>If you uncheck all, but check the first checkbox, no entries are shown - but all entries with the class cat1 should be shown - even if they have another category which is unchecked.
How can I do this without writing tens of IF statements?</p>
