filtering data with check boxes using jquery -

i attempting filter div items depending on whether check boxes checked or not, default checked.

i have managed filtering work struggling append error message if no results found (if no check box checked)

no results found, please reset filter , search again

i have placed code here http://jsfiddle.net/3wcdc/25/

thank in advanced can me, it's appreciated.

html

<div id="categorycontent">   <div class="product">brand1</div> <div class="product">brand2</div> <div class="product">brand3</div> <div class="product">brand4</div>           <h2>brands:</h2> <input type="checkbox" name="brand" value="brand1"/>brand1 </br> <input type="checkbox" name="brand" value="brand2"/>brand2 </br> <input type="checkbox" name="brand" value="brand3"/>brand3 </br>     <input type="checkbox" name="brand" value="brand4"/>brand4 </br>   </div> 

the javascript filtering:

var $filters = $("input:checkbox[name='brand']").prop('checked', true); // start checked var $categorycontent = $('#categorycontent div'); $filters.click(function() {     // if of checkboxes brand checked, want show div's containing value, , want hide rest.     $categorycontent.hide();     $filters.filter(':checked').each(function(i, el) {         $categorycontent.filter(':contains(' + el.value + ')').show();     }); }); 

here's want: jsfiddle

html

<div id="categorycontent">      <h2 id="errormessage">no results found, please reset filter , search again</h2>      <div class="product">brand1</div>     <div class="product">brand2</div>     <div class="product">brand3</div>     <div class="product">brand4</div>     <br>     <br>     <br>     <br>     <br>      <h2>brands:</h2>      <input type="checkbox" name="brand" value="brand1" />brand1</br>     <input type="checkbox" name="brand" value="brand2" />brand2</br>     <input type="checkbox" name="brand" value="brand3" />brand3</br>     <input type="checkbox" name="brand" value="brand4" />brand4</br> </div> 

jquery

var $filters = $("input:checkbox[name='brand']").prop('checked', true), // start checked     $categorycontent = $('#categorycontent div'),     $errormessage = $('#errormessage');  $filters.click(function () {     // if of checkboxes brand checked, want show div's containing value, , want hide rest.     $categorycontent.hide();     var $selectedfilters = $filters.filter(':checked');     if ($selectedfilters.length > 0) {         $errormessage.hide();         $selectedfilters.each(function (i, el) {             $categorycontent.filter(':contains(' + el.value + ')').show();         });     } else {         $errormessage.show();     }  }); 

css

#categorycontent {     width:920px;     margin:auto; } .product {     width:50px;     height:50px;     display:block;     margin-bottom:10px;     margin-right:10px;     background:red;     float:left; } #errormessage {     display: none; }