javascript add checkbox-checked values

Question

I have a checkbox section that users can select to add features. I need each input\'s value to add to a sum to be presented in the #payment-total and #payment-rebill section. Es

Answer 1

function updateTotals() {
    var inputs = document.getElementById('extra-features').getElementsByTagName('input');

    var sum = 0;
    for (var i = 0, num = inputs.length; i < num; i++) {
        if (inputs[i].checked) {
            sum += parseInt(inputs[i].getAttribute('value'));
        }
    }

    document.getElementById('payment-total').innerHTML = sum;
    document.getElementById('payment-rebill').innerHTML = sum;
}

var section = document.getElementById('extra-features');
var inputs = section.getElementsByTagName('input');

for (var i = 0, num = inputs.length; i < num; i++) {
    inputs[i].addEventListener('change', updateTotals);
}

JSFiddle: http://jsfiddle.net/6NJ8e/11/

This could be written a bit more succinctly with jQuery (or similar) since you have some DOM handling, but it isn't too bad without.

Basically, you have a function which sums everything and updates your fields.

To do this, you need to get a hold of all inputs. I used "extra-features" as the anchor since it was the closest ID-ed element.

Then, loop through them. If they are checked, add them to a total then just update your values.

If you used something that can do CSS-like selectors, you can usually just get the checked inputs directly (like $('#extra-features input:checked')) and skip the conditional.

Then, you just need to add a change event to each input which calls the updateTotals function any time something changes.

A bit of further optimization (depending on your exact usage), is you could store the inputs for further use so you don't have to look them up each time (but don't do this if you're in the global scope, only if this function would be encapsulated in some way).