<p id="sum">0</p>
<div id="items"></div>
let items = [5, 14, 3, 8];
let sum = {
total: 0,
items: {}
}
items.forEach((item, index) => {
sum.items[index] = {checked: false, value: item};
document.querySelector('#items').innerHTML += '<p>\
<input type="checkbox" class="item"\
data-index="'+index+'" value="'+item+'"\
/> '+item+'</p>';
});
document
.querySelector('#items')
.addEventListener('click', (event) => {
let item = event.target;
if( item.classList.contains('item') ) {
if(sum.items[item.dataset.index].checked) { //already checked
sum.total -= parseInt(item.value);
} else {
sum.total += parseInt(item.value);
}
sum.items[item.dataset.index].checked = item.checked;
}
document.querySelector('#sum').innerHTML = sum.total;
})
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.