Javascript I'；我试图将一个变量分配给复选框，并在它'；检查过了吗

我对Javascript非常陌生，非常感谢您的帮助！如果jQuery库改变了什么，我也会使用它

我需要的是，如果勾选了第一个

复选框

，则输出应为100kcal，而如果勾选了这两个复选框，则其总和应为300kcal。我的问题是，当我取消勾选时，它会再次添加变量

HTML:

---

首先，如果您使用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>

---

将单击的元素传递到函数中

HTML

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

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

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

检查这个演示

---

更好的方法是这样做

HTML

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

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

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

---

请参阅此演示。

在您的案例中，您可以使用以下代码：

HTML

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

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

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

---

您还可以检查它是如何工作的。

您的HTML应该如下所示

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

---

value

可能并不总是合适的选择，例如，当您需要提交表单在服务器上处理时。非常感谢！xD我正在制作我的第一个网页，这将对我帮助很大！：D

$('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.
});