Необходимо повесить функцию на событие onchange на input, но только если у input-а класс
menu.
Часть HTML:
...
<p><input type="checkbox" checked data-cost="20" data-kkal="200" class="menu">Котлета</p>
...
Весь JS:
onchange = function getResult(){
var menu = document.getElementsByClassName('menu');
var cost = 0;
var kkal = 0;
for (let index = 0; index < menu.length; index++) {
if(menu[index].checked) {
cost += parseFloat(menu[index].getAttribute('data-cost'));
kkal += parseFloat(menu[index].getAttribute('data-kkal'));
}
}
document.getElementById('cost').innerHTML = cost;
document.getElementById('kkal').innerHTML = kkal;
}