无法获得这些javascript if语句

时间:2014-03-17 06:04:11

标签: javascript jquery

JS Fiddle

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>

要查看字符串应该如何转到小提琴中的第176行,并将TheString更改为BreakfastDR。请参阅console.log以获取字符串输出。这就是当复选checkbox1并且范围滑块处于活动状态时它应该是这样的。

此外,如果您将第176行更改为jQuery('.rangecheck').attr('value', BreakfastDr + LunchDR + DinnerDR + SnacksDR);,控制台将显示如果选中所有4个复选框并且范围滑块处于活动状态,则会显示它的外观。

但我的问题是数组没有构建。 .push()方法工作正常,它位于问题所在的if语句中。 (尝试删除if部分,只需拥有.push()部分即可查看我的意思。

有人可以在这里纠正我的错误吗?

3 个答案:

答案 0 :(得分:0)

尝试使用方法attr而不是像这样的道具:

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

答案 1 :(得分:0)

试试这个:

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

参考链接check checkbox is checked

答案 2 :(得分:0)

prop字符串应该没有冒号,如下所示:

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