Jquery issue: can't get if statement working (check if checkboxes are checked)

Hey guys,

I tried getting this answered at stackoverflow for nearly the entire day but wasn't getting answers. So I thought, wait a minute I'm sure the pros over at WPMU Dev wouldn't mind helping out.

Here is a JS Fiddle: Link
The code I'm having trouble with starts on line 140. Also I have the string getting output to console.

Here is my JS code: `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 = [];
var TestSlider = [];
while (low <= high) {
BreakfastDR.push('.' + low +'.breakfast');
LunchDR.push('.' + low +'.lunch');
DinnerDR.push('.' + low +'.dinner');
SnacksDR.push('.' + low +'.snacks');
TestSlider.push('.'+low);
low++;
}
if (jQuery(".checkbox1").is(':checked')){
TheString.push(BreakfastDR)
}
if (jQuery(".checkbox2").prop(':checked')){
TheString.push(LunchDR)
}
if (jQuery(".checkbox3").prop(':checked')){
TheString.push(DinnerDR)
}
if (jQuery(".checkbox4").prop(':checked')){
TheString.push(SnacksDR)
}

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

/*start the function*/
jQuery(rangesliderfilter);`

Now it works fine with TestSlider as it is by default. But I want to have jQuery('.rangecheck').attr('value', TheString;if any checkboxes are checked. If none are checked then jQuery('.rangecheck').attr('value', TestSlider);

There is something wrong with my if statements, because the strings just get put out as all. But if you put any of the other vars in place of TheString in the jQuery('.rangecheck').attr('value', TheString; line, it outputs the string as it should.

Hope that makes sense.
Check out the fiddle and it should make more sense.

Thanks in advance!!