filtering click function

by sunil puvvada

HTML

<div class="sunil">
            
                <h3 style="font-size:14px; font-weight:normal;">Available Flowers</h3>
                <p style="font-size:12px;"><strong>Filter flowers by colour:</strong></p>
                <form>
                    <label style="font-size:12px;"><input type="checkbox" id="red" /> Red</label><br>
                    <label style="font-size:12px;"><input type="checkbox" id="yellow" /> Yellow</label><br>                    
                    <label style="font-size:12px;"><input type="checkbox" id="purple" /> Purple</label><br>
                    <label style="font-size:12px;"><input type="checkbox" id="other" /> Other</label>
                </form>
                <p style="font-size:12px;"><strong>Filter flowers by size:</strong></p>
                <form>
                    <label style="font-size:12px;"><input type="checkbox" id="small" /> Small</label><br>
                    <label style="font-size:12px;"><input type="checkbox" id="medium" /> Medium</label><br>                  
                    <label style="font-size:12px;"><input type="checkbox" id="large" /> Large</label>
                </form>                
                                            
          	</div>
            
            <div class="planets-wrap">
            
                <h3 style="font-size:14px; font-weight:normal;">Available Planets</h3>
                
                <div class="planets" style="font-size:12px;">
                	<div>Mars <input type="checkbox" id="mars" /></div>
                    <div>Venus <input type="checkbox" id="venus" /></div>
                    <div>Earth <input type="checkbox" id="earth" /></div>
                    <div>Jupiter <input type="checkbox" id="jupiter" /></div>
                    <div>Saturn <input type="checkbox" id="saturn" /></div>
                    <div>Mercury <input type="checkbox" id="mercury" /></div>              
                </div>                
                
  ...

CSS

body { font-family:'Arial'; color:#646464; }		
	.planets-wrap { float:left; width:20%; margin:0 5% 0 0; padding:0; }		
	.flowers-wrap { float:left; width:20%; margin:0 5% 0 0; padding:0; position:relative; }	
	.flowers { float:left; width:50%; }
	.flowers div { float:left; width:90%; height:68px; line-height:68px; padding:0 5%; background:#eee; margin:0 0 1px; position:relative; }

JavaScript

$('.sunil,.planets-wrap').delegate('input[type=checkbox]', 'change', function() {
					var $lis = $('.flowers > div'),
						$checked = $('input:checked');	
					if ($checked.length)
					{							
                        var selector = '';
                        $($checked).each(function(index, element){                            
                            selector += "[data-category~='" + element.id + "']";                            
                        });                        
						$lis.hide();                        
						$('.flowers > div').filter(selector).show();			   
					}
					else
					{
						$lis.show();
					}
				});