2

我对 Javascript 很陌生，如果有任何帮助，我将不胜感激！如果有任何改变，我也在使用 jQuery 库。

我需要的是，如果第一个checkbox被勾选，输出应该是 100kcal，而如果两个都被勾选，那么它应该加起来 300kcal。我的问题是，当我取消选中它时，它会再次添加变量。

HTML：

<input type=checkbox onchange="myFunction(100)" value="scrambledEggs">Scrambled Eggs</input>
<input type=checkbox onchange="myFunction(200)" value="bacon">Bacon</input>
<p id="output">0kcal</p>

JS：

var result = 0;    
function myFunction(x) {    
    if (this.checked) {    
        result -= x;   
        document.getElementById("output").innerHTML = result + "kcal";    
    } 
    else {
        result += x;
        document.getElementById("output").innerHTML = result + "kcal";
    }
}
4

4 回答 4

3

首先，如果您使用 jQuery，您应该使用它来附加事件处理程序而不是onchange属性。其次，input标签是自动关闭的——您当前的 HTML 无效。最后，您可以使用data属性来存储选项的 kcal 值：

<label><input type="checkbox" class="food-option" data-kcals="100" value="scrambledEggs" />Scrambled Eggs</label>
<label><input type="checkbox" class="food-option" data-kcals="200" value="bacon" />Bacon</label>
<p id="output"><span>0</span>kcal</p>

然后，您可以使用 jQuery 附加事件并汇总所有检查的值并显示它们：

$('.food-option').change(function() {
    var totalKcals = 0;
    $('.food-option:checked').each(function() {
       totalKcals += parseInt($(this).data('kcals'), 10); 
    });
    $('#output span').text(totalKcals);
});

示例小提琴

于 2013-01-26T12:41:11.767 回答
2

在您的情况下，您可以使用以下代码：

HTML

<input type="checkbox" value="scrambledEggs" data-kcal="100">scrambledEggs</input>
<input type="checkbox" value="bacon" data-kcal="200">bacon</input>
<p id="output"> 0 kcal</p>

它有data-kcal标签，它是您的千卡值的容器。

JS

var result = 0;

$('input[type="checkbox"]').on("change", function() {
    if($(this).attr('checked'))
    {
        result += parseInt($(this).attr("data-kcal"));
    }else{
        result -= ($(this).attr("data-kcal"));
    }
    $("#output").text(result + " kcal");
});

您还可以检查它在这个 jsFiddle上的工作方式。

于 2013-01-26T12:49:17.040 回答
1

您的 HTML 应如下所示

<input type='checkbox' value="100">Scrambled Eggs  </input>
<input type='checkbox' value="200"> Bacon </input>
<p id="output">0kcal </p>

那么你最好使用 JQuery，编写更少的代码，提高可读性。下面的代码将满足您的需求。

$('input[type=checkbox]').change(function (e) { //This will trigger every check/uncheck event for any input of type CheckBox.
    var res = 0;
    $('input[type=checkbox]:checked').each(function() { //Loop through every checked checkbox.
       res += parseInt($(this).val());  //Sum it's value.
    });
    $('#output').text(res); //Add the final result to your span.
});

演示

于 2013-01-26T13:03:27.270 回答
0

将被点击的元素传递给函数...

HTML

<input type=checkbox onchange="myFunction(this, 200)" value="bacon">Bacon</input>

JAVASCRIPT

function myFunction(element, value) {
    console.log(element.checked);
}

查看此JSFiddle以获取演示。

更好的方法是这样的......

HTML

<div id="checkboxes">
    <input type=checkbox value="bacon">Bacon</input>
    <input type=checkbox value="Other">Other</input>
</div>
<p id="output">0kcal</p>

JAVASCRIPT

var checkboxes = document.getElementById("checkboxes");

checkboxes.onchange = function (e) {
    alert("Target: " +  e.target.value + " Checked: " + e.target.checked);
};

请参阅此小提琴以进行演示。

于 2013-01-26T12:45:39.973 回答