javascript - JQuery list filtering with multiple criteria -

javascript - JQuery list filtering with multiple criteria -

i trying filter list of college classes using 2 different criteria: class grouping , partition (upper or lower). have working display classes meet each criteria, need list display classes meet both criteria only, i.e., class web design class , upper division.

html:

<div id="classes"> <div class="boxes"> programs<br> <span class="input"> <label><input type="checkbox" rel="program1"> web</label> <label><input type="checkbox" rel="program2"> design</label> <label><input type="checkbox" rel="program3"> print</label> <label><input type="checkbox" rel="program4"> photography</label> <br>division<br> <label><input type="checkbox" rel="division1"> lower</label> <label><input type="checkbox" rel="division2"> upper</label> </span> </field> <br> <div id="button"><input type="button" value="search"> </div> <div id="reset"><input type="button" value="reset"></div> </div> <ul class="courses"> <li class="program1 division1">git 101: pictures</li> <li class="program1 division2">git 301: web</li> <li class="program2 division1">git 201: film</li> <li class="program2 division2">git 434: sound</li> <li class="program1 division1">git 120: coding</li> </ul> </div>

jquery:

<script type="text/javascript"> $(document).ready(function(){ /*$('.courses > li').hide();*/ $('div.boxes').find('input:checkbox').on('click', function () { $("#button").click(function () { $('.courses > li').hide(); $('div.boxes').find('input:checked').each(function () { $('.courses > li.' + $(this).attr('rel')).show(); }); }); }); }); $("#reset").click(function() { $(document).find('input:checkbox').removeattr('checked'); $('.courses > li').show(); }); </script>

what replacing rel classes , wrapping in if statement`:

if(element.hasclass('program') || element.hasclass('division'))

so code this:

<label><input type="checkbox" rel="program program1"> web</label> <label><input type="checkbox" rel="division division1"> lower</label>

javascript jquery html