I have some problem filtering checkbox options, lets say you want to show Action and RTS games which should get you Assassins Creed and StarCraft, but instead im not getting anything.
heres a codepen too see the code: http://codepen.io/anon/pen/vEzGYa
Thanks in advance for any input.
<div id="container">
<div id="filter">
<h3>Filter By</h3>
<div class="category-filters"><img id="reset" src="http://www.asus.com/media/images/rest.png" alt="" />Reset</div>
<div class="category-filters">
<div class="genre">
<img src="http://www.asus.com/media/images/close_round.png" id="open" class="col"/> Genre
</div>
<div id="genre-filters">
<ul class="filter-options">
<li><input type="checkbox" value="filter_action" data-filter_id="action"> Action</li>
<li><input type="checkbox" value="filter_fps" data-filter_id="fps"> FPS</li>
<li><input type="checkbox" value="filter_rpg" data-filter_id="rpg"> RPG<li>
<li><input type="checkbox" value="filter_rts" data-filter_id="rts"> RTS</li>
<li><input type="checkbox" value="filter_adventure" data-filter_id="adventure"> Adventure</li>
</ul>
</div>
</div>
<div class="category-filters">
<div class="brand">
<img src="http://www.asus.com/media/images/close_round.png" id="open" class="col1"/> Platform
</div>
<div id="brand-filters" class="category-filters">
<ul class="filter-options">
<li><input type="checkbox" value="filter_pc" data-filter_id="pc"> PC</li>
<li><input type="checkbox" value="filter_ps3" data-filter_id="ps3"> PS3</li>
<li><input type="checkbox" value="filter_ps4" data-filter_id="ps4"> PS4<li>
<li><input type="checkbox" value="filter_x360" data-filter_id="x360"> Xbox 360</li>
<li><input type="checkbox" value="filter_xone" data-filter_id="xone"> Xbox one</li>
</ul>
</div>
</div>
</div>
<div id="products">
<ul id="product-list">
<li class="filter_pc filter_fps filter_xone">
<img src="https://encrypted-tbn0.gstatic.com/shopping?q=tbn:ANd9GcRq1K6i1syrOr20l1k43vcJCSjeMHJP7c0w-xS-xmpSUPM1EuGGLPNI73gox8cbJX9k0tlRtvfm&usqp=CAE" alt="" />
</li>
<li class="filter_action filter_adventure filter_pc filter_ps3 filter_x360">
<img src="http://s4.thcdn.com/productimg/0/300/300/52/10780752-1370965433-955769.jpg" alt="" />
</li>
<li class="filter_fps filter_pc filter_ps3 filter_x360">
<img src="http://s2.thcdn.com/productimg/0/300/300/42/10846642-1389618973-536407.jpg" alt="" />
</li>
<li class="filter_rts filter_pc">
<img src="http://s2.thcdn.com/productimg/0/300/300/01/10654001-1353502110-933610.jpg" alt="" />
</li>
<li class="filter_rpg filter_ps4">
<img src="http://s2.thcdn.com/productimg/0/180/180/92/10968092-1422879679-941767.jpg" alt="" />
</li>
</ul>
</div>
</div>
jQuery:
$(document).ready(function () {
$(".filter-options :checkbox").click(function(){
$("#product-list li").hide();
$(".filter-options :checkbox:checked").each(function(){
$("." + $(this).val()).fadeIn();
});
if ($('.filter-options :checkbox').filter(':checked').length == 0 ) {
$("#product-list li").fadeIn();
}
});
});