我正在尝试为复选框分配一个变量，并在选中该变量时将其添加到输出变量中

Question

I'm very new to Javascript and would appreciate ANY help! I'm also using a jQuery library if that changes anything.

What I need is that if the first checkbox was ticked the output should be 100kcal, while if both were ticked then it should add up to 300kcal. My problem is that when I untick it adds the variables AGAIN.

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

Answer 1

Firstly if you're using jQuery, you should use it to attach the event handlers instead of onchange attributes. Secondly, the input tag is self closing - your current HTML is invalid. Finally, you can use a data attribute to store the kcal value for the option:

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

Then you can use jQuery to attach the event and total up all the checked values and display them:

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

Example fiddle

Answer 2

In your case you can use this code:

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>

it have data-kcal tag which is container for your kcal value.

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

Also you can check how it works on this jsFiddle .

Answer 3

Your HTML should be like below

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

Then you better use JQuery, less code written, more readability. The code below will achieve your needs.

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

Demo

Answer 4

Pass the element that is clicked into the function...

HTML

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

JAVASCRIPT

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

Check this JSFiddle for a demo.

---

Better way of doing it is like this...

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

See this fiddle for a demo.