Can't get these javascript if statements to work

Question

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 = [];
    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++;
    }

    var checkbox1 = jQuery('.checkbox1').prop(':checked');
    var checkbox2 = jQuery('.checkbox2').prop(':checked');
    var checkbox3 = jQuery('.checkbox3').prop(':checked');
    var checkbox4 = jQuery('.checkbox4').prop(':checked');

     if (checkbox1){
        TheString.push(BreakfastDR)
    }
     if (checkbox2){
        TheString.push(LunchDR)
    }
     if (checkbox3){
        TheString.push(DinnerDR)
    }
     if (checkbox4){
        TheString.push(SnacksDR)
    }

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

HTML

<fieldset>
     <h4>Meal Time</h4>

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

To see how the string should be just go to line 176 in the fiddle and change TheString to BreakfastDR. See console.log for the string output. That is how it is supposed to look like when checkbox1 is checked and the range slider is active.

Also, if you change line 176 to jQuery('.rangecheck').attr('value', BreakfastDr + LunchDR + DinnerDR + SnacksDR); the console wil show you what it is suppose to look like if all 4 checkboxes were checked and range slider active.

But my problem is that the array is not being built. The .push() method works fine, it is in the if statement where the problem is. (try deleting the if parts and just have the .push() parts to see what I mean)

Can someone correct my mistake here?

score 0 · Answer 1 · answered Mar 17 '14 at 06:16

try to use method attr instead of prop like this:

var checkbox1 = jQuery('.checkbox1').attr(':checked');
var checkbox2 = jQuery('.checkbox2').attr(':checked');
var checkbox3 = jQuery('.checkbox3').attr(':checked');
var checkbox4 = jQuery('.checkbox4').attr(':checked');

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

try this:

var checkbox1 = $(".checkbox1").is(':checked')
var checkbox2 = $(".checkbox2").is(':checked')
var checkbox3 = $(".checkbox3").is(':checked')
var checkbox4 = $(".checkbox4").is(':checked')

refer link check checkbox is checked

edited May 23 '17 at 12:20

Community

1
1

answered Mar 17 '14 at 06:18

Alok Agarwal

3,071
3
23
33

score 0 · Accepted Answer · answered Mar 17 '14 at 06:18

0

The prop string should be without the colon like this:

var checkbox1 = jQuery('.checkbox1').prop('checked');

answered Mar 17 '14 at 06:18

kamilkp

9,690
6
37
56

Can't get these javascript if statements to work

3 Answers3