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