<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.