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).

Answer 2

total1 = document.getElementById('payment-rebill');

Gets the id 'payment-billed' and assigns a copy of it to var total1. Then

total1.innerHTML = parseFloat(total1.innerHTML) + add

Only changes the innerHTML of the COPY that you made a second ago. Try jQuery:

total1 = parseFloat(total1.innerHTML) + add
$("#payment-rebill").innerHTML(total1);

This way you do the calculations on the copy, then replace the original innerHTML with the copy's innerHTML.

EDIT -- To make it more clear, your original code was only changing the local copy total1. There wasn't any code to update the original #payment-rebill element.

Answer 3

Oops! Typo!

Your second span is called payment-rebill not payment-billed. This works

    total1 = document.getElementById('payment-rebill');

http://jsfiddle.net/6NJ8e/13/