Hide div when checkbox is ticked

Question

I would like to be able to hide certain divs(db query results) when a filter is applied, for example: Fiddle Example 1 | Fiddle Example 2

All results should show when the page is loaded. Using a checkbox for price and food, if price = high and food = pizza is selected it will display the corresponding results and hide the rest of the results.

Filter by price: High | Low 
Filter by food: Pizza | Pasta

<div class="new">Price: Low , Type: Pasta </div>
<div class="new">Price: Low , Type: Pasta </div>
<div class="new">Price: High , Type: Pasta </div>
<div class="new">Price: Low , Type: Pizza </div>
<div class="new">Price: High , Type: Pizza </div>

Answer 1

The easy should be give the each element extra attributes like

<div class="new" price='10' foodtype='pasta'>Price: Low , Type: Pasta </div>
<div class="new" price='25' foodtype='Pasta'>Price: Low , Type: Pasta </div>
<div class="new" price='35' foodtype='Pasta'>Price: High , Type: Pasta </div>
<div class="new" price='45' foodtype='Pizza'>Price: Low , Type: Pizza </div>
<div class="new" price='25' foodtype='Pizza'>Price: High , Type: Pizza </div>

Then apply jQuery like that

var price10 = $(".new").find("[price='10']");
var price20 = $(".new").find("[price='20']");
var price30 = $(".new").find("[price='30']");
var price40 = $(".new").find("[price='40']");
var price50 = $(".new").find("[price='50']");

These variables will hold the reference to the specific food. Now apply simple jQuery show and hide.

Just make sure your elements attributes does not conflict with standard attributes.