Check if checkbox is checked then do function (not working)

Question

HTML

<fieldset>
  <h4>Meal Time</h4>
  <div class="checkbox1">
    <input type="checkbox" value=".breakfast"/>
    <label>Breakfast</label>
  </div>
  <div class="checkbox2">
    <input type="checkbox" value=".lunch"/>
    <label>Lunch</label>
  </div>
  <div class="checkbox3">
    <input type="checkbox" value=".dinner"/>
    <label>Dinner</label>
  </div>
    <div class="checkbox4">
    <input type="checkbox" value=".snacks"/>
    <label>Snacks</label>
  </div>
</fieldset>

JS

var rangesliderfilter = function () {
    var low = parseInt(jQuery('#min-value-span').text());
    var high = parseInt(jQuery('#max-value-span').text());
    var BreakfastDR = [];
    var LunchDR = [];
    var DinnerDR = [];
    var SnacksDR = [];
    var TheString = []; /*This is the var I want the string to be in*/
    while (low <= high) {
        BreakfastDR.push('.' + low +'.breakfast');
        LunchDR.push('.' + low +'.lunch');
        DinnerDR.push('.' + low +'.dinner');
        SnacksDR.push('.' + low +'.snacks');
        low++;
}

    if (jQuery(".checkbox1 input[type='checkbox']").is(':checked')){
        TheString.push(BreakfastDR)
    }
    if (jQuery(".checkbox2 input[type='checkbox']").is(':checked')){
        TheString.push(LunchDR)
    }
    if (jQuery(".checkbox3 input[type='checkbox']").is(':checked')){
        TheString.push(DinnerDR)
    }
    if (jQuery(".checkbox4 input[type='checkbox']").is(':checked')){
        TheString.push(SnacksDR)
    }

jQuery('.rangecheck').attr('value', TheString);
}

The Goal

To create a string that follows this pattern:

Just breakfast checked: .0.breakfast,.1.breakfast,.2.breakfast,etc Breakfast and lunch checked: .0.breakfast,.1.breakfast,.2.breakfast,.0.lunch,.1.lunch,.2.lunch

If any others were selected it would continue the patter just with .dinner or .snacks trailing every number.

Here is a JS fiddle with the JS code starting at line 140

Click here for JS Fiddle

Strings are output to console

How can I achieve my goal?

Answer 1

Call me crazy, but I think you might be able to go about this in a different way. Update your HTML so all checkboxes you want to validate have the same class:

<fieldset>
  <h4>Meal Time</h4>
  <div class="checkbox1">
    <input type="checkbox" value=".breakfast" class="checkMe"/>
    <label>Breakfast</label>
  </div>
  <div class="checkbox2">
    <input type="checkbox" value=".lunch" class="checkMe"/>
    <label>Lunch</label>
  </div>
  <div class="checkbox3">
    <input type="checkbox" value=".dinner" class="checkMe"/>
    <label>Dinner</label>
  </div>
    <div class="checkbox4">
    <input type="checkbox" value=".snacks" class="checkMe"/>
    <label>Snacks</label>
  </div>
</fieldset>

Then perform your check in your function using .each()

var rangesliderfilter = function () {
    var low = parseInt($('#min-value-span').text(),10),
        high = parseInt($('#max-value-span').text(),10),
        LunchDR = [],
        DinnerDR = [],
        SnacksDR = [],
        TheString = []; //Corresponding vars that are checked separated

    while (low <= high) {
        BreakfastDR.push('.' + low +'.breakfast');
        LunchDR.push('.' + low +'.lunch');
        DinnerDR.push('.' + low +'.dinner');
        SnacksDR.push('.' + low +'.snacks');
        low++;
    }

    $('.checkMe').each(function(i){
        var self = this;

        if(self.checked){
            switch(i+1){
                case 1:
                    TheString.push(BreakfastDR);
                    break;
                case 2:
                    TheString.push(LunchDR);
                    break;
                case 3:
                    TheString.push(DinnerDR);
                    break;
                case 4:
                    TheString.push(SnacksDR);
                    break;
            }
        }
    });

    $('.rangecheck').val(TheString);
}

This will perform the same validation you are doing with the if ... is.(':checked') using WAY less overhead. Additionally ... don't use .attr('value') unless you're using like jQuery 1.4. .val() is pretty standard at this point. And when using parseInt, always include the base parameter, which is usually base 10 if you are doing a standard parse.

Answer 2

Your Uncaught SyntaxError is happening because you're missing the period before is. Also, as Arun mentioned below, you're missing parens around your conditional:

if(jQuery(".checkbox1 input[type='checkbox']").is(':checked')){
    TheString.push(BreakfastDR)
}
if(jQuery(".checkbox2 input[type='checkbox']").is(':checked')){
    TheString.push(LunchDR)
}
if(jQuery(".checkbox3 input[type='checkbox']").is(':checked')){
    TheString.push(DinnerDR)
}
if(jQuery(".checkbox4 input[type='checkbox']").is(':checked')){
    TheString.push(SnacksDR)
}