选中复选框，然后执行功能(不工作）

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

本文关键字：工作 功能 执行 复选框 然后      更新时间：2023-09-26

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

如果有其他人被选中，它会继续这种模式，每个数字后面都有晚餐或小吃。

这是一个JS篡改JS代码，从第140行开始

点击此处查看JS Fiddle

字符串输出到控制台

我该如何实现目标

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

你可以说我疯了，但我认为你可以用不同的方式来做这件事。更新您的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')相同的验证。此外。。。不要使用.attr('value')，除非您使用的是类似jQuery 1.4的内容。.val()在这一点上是相当标准的。使用parseInt时，请始终包含基本参数，如果您正在进行标准解析，则该参数通常为基本10。

相关文章：