I've seen many examples of filtering with checkboxes and radio buttons to display different classes. Problem is for two selected classes all elements with either class will show but I'd like it to only show elements with BOTH classes. Here is some sample code: http://jsfiddle.net/DH3m3/
the js:
function filterItems() {
var colors = $(":radio:checked").map( function(){ return this.value; }).get();
var goodClasses = colors.join(",");
$(".item").hide().filter(goodClasses).show();
}
filterItems();
$(":radio").change(filterItems);
and the html:
<label for="one">one</label><input id="one" type="radio" name="number" value=".one" />
<label for="two">two</label><input id="two" type="radio" name="number" value=".two" />
<label for="none">none</label><input id="none" type="radio" name="number" value=".none" />
<hr/>
<label for="red">red</label><input id="red" type="radio" name="color" value=".red" />
<label for="blue">blue</label><input id="blue" type="radio" name="color" value=".blue" />
<label for="green">green</label><input id="green" type="radio" name="color" value=".green" />
<label for="non">none</label><input id="non" type="radio" name="color" value=".none" />
<hr/>
<div class="item one yellow">yellow</div>
<div class="item two red">red</div>
<div class="item one blue">blue</div>
<div class="item two green">green</div>
<div class="item one red green">red green</div>
<div class="item two red blue">red blue</div>
<div class="item one blue green">blue green</div>
<div class="item two red blue green">red blue green</div>
So in this example, I'd like if the "one" and the "red" are selected, the element that should show would be "red green", or if "two" and "blue" - "red blue" and "red blue green". Any thoughts or ideas?
