call function depending on check and check other checkboxes

Question

well so many checks, but it is a problem I am dealing with right now. Basically I have a few checkboxes in my markup:

<input id="only_veggi" type="checkbox" name="ingredients" value="showveggi"> only vegetarian <br>
<input id="show_15min" type="checkbox" name="time" value="15min" style="margin-left: -59px;"> 15min <br>
<input id="show_28min" type="checkbox" name="time" value="28min" style="margin-left: -59px;"> 28min <br> 
<input id="show_45min" type="checkbox" name="time" value="45min" style="margin-left: -59px;"> 45min <br> 
<input id="show_60min" type="checkbox" name="time" value="60min" style="margin-left: -59px;"> 60min <br><br>

and fire a function based on that check:

jQuery('#show_15min').click(function(){
   if (this.checked) {
      jQuery('#content_container').isotope({ filter: '.fifteen' });
    }

   if (!this.checked) {
      jQuery('#content_container').isotope({ filter: '.twentyeight, .fourtyfive, .sixty' });
   }
});

but I also want to check which other checkboxes are checked and unchecked and depending on this I have to change the classes in the filter of isotope. Of course I could make a lot of if statements like

if(!this.checked && !jQuery('#show_45min').checked && jQuery('#show_60min').checked)
      jQuery('#content_container').isotope({ filter: '.sixty', '.fifteen');
{

but this can't be the solution.

Does anyone have an idea how I can got through all checkboxes when checking and unchecking them and depending on the status it changes the filter class of isotope.

I hope I made myself clear.

Thanks in advance.

Answer 1

You could set it up so that every time any checkbox of that class is clicked it builds a list containing all of the selected items.

HTML

<input id="only_veggi" type="checkbox" name="ingredients" value="showveggi"> only vegetarian <br>
<input class="time" id="show_15min" type="checkbox" name="time" value="15min" style="margin-left: -59px;"> 15min <br>
<input class="time" id="show_28min" type="checkbox" name="time" value="28min" style="margin-left: -59px;"> 28min <br> 
<input class="time" id="show_45min" type="checkbox" name="time" value="45min" style="margin-left: -59px;"> 45min <br> 
<input class="time" id="show_60min" type="checkbox" name="time" value="60min" style="margin-left: -59px;"> 60min <br><br>

Javascript

var timeClassLookup = {
   show_15min: '.fifteen',
   show_28min: '.twentyeight',
   show_45min: '.fortyfive',
   show_60min: '.sixty'
};

$('.time').click(function() {
   var classes = [];
   var $checkedBoxes = $('.time:checked');
   $checkedBoxes.each(function () {
      var checkboxId = $(this).attr('id');
      classes.push(timeClassLookup[checkboxId]);
   });

   $('#content_container').isotope({ filter: classes.join(', ') });
});