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);
}

目标

要创建遵循此模式的字符串：

早餐检查：.0.breakfast,.1.breakfast,.2.breakfast,etc 检查早餐和午餐：.0.breakfast,.1.breakfast,.2.breakfast,.0.lunch,.1.lunch,.2.lunch

如果选择了其他任何人，它将继续使用.dinner或.snacks跟踪每个数字。

这是一个JS小提琴，从第140行开始的JS代码

Click here for JS Fiddle

字符串输出到控制台

如何实现目标？

Answer 1

您的Uncaught SyntaxError正在发生，因为您错过了is之前的时段。另外，正如Arun在下面提到的那样，你错过了有条件的parens：

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)
}

Answer 2

叫我疯了，但我想你可能会以不同的方式解决这个问题。更新您的HTML，以便您要验证的所有复选框都具有相同的类：

<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>

然后使用.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);
}

这将使用WAY减少开销执行与if ... is.(':checked')相同的验证。另外......除非你像jQuery 1.4一样使用，否则不要使用.attr('value')。 .val()在这一点上非常标准。使用parseInt时，请始终包含base参数，如果您正在进行标准解析，则该参数通常为10。

检查复选框是否已选中然后执行功能（不工作）

2 个答案: