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. Essentially, if they select two of the checkboxes, #payment-total and #payment-rebill would = 100. I am able to get the first number to add/change, but having trouble getting #payment-rebill to change as well.

Here is my html:

<section id="extra-features">
<label class="header">Extra Features ($50/month): </label><br><br>
                    <div class="span3">
                    <label class="checkbox" for="Checkbox1">
                        <input value="50" type="checkbox" id="Checkbox1" value="option1" data-toggle="checkbox"> Instagram
                    </label>
                    <label class="checkbox">
                        <input value="50"  type="checkbox" id="Checkbox2" value="option2" data-toggle="checkbox"> Review site monitoring
                    </label>
                    <label class="checkbox">
                        <input value="50"  type="checkbox" id="Checkbox3" value="option3" data-toggle="checkbox"> Google+
                    </label>
                    <label class="checkbox">
                        <input value="50"  type="checkbox" id="Checkbox4" value="option4" data-toggle="checkbox"> LinkedIn
                    </label>
                    </div>
                    <div class="span3">
                    <label class="checkbox">
                        <input value="50"  type="checkbox" id="Checkbox5" value="option5" data-toggle="checkbox"> Pinterest
                    </label>
                    <label class="checkbox">
                        <input value="50"  type="checkbox" id="Checkbox6" value="option6" data-toggle="checkbox"> FourSquare
                    </label>
                    <label class="checkbox">
                        <input value="50"  type="checkbox" id="Checkbox7" value="option7" data-toggle="checkbox"> Tumblr
                    </label>
                    <label class="checkbox">
                        <input value="50"  type="checkbox" id="Checkbox8" value="option8" data-toggle="checkbox"> Advertising
                    </label>
                    </div>
                </section>

<div class="card-charge-info">
                Your card will be charged $<span id="payment-total">0</span> now, and your subscription will bill $<span id="payment-rebill">0</span> every month thereafter. You can cancel or change plans anytime.
            </div>

My javascript:

var inputs = document.getElementsByClassName('sum'),
    total  = document.getElementById('payment-total');
    total1 = document.getElementById('payment-billed');

 for (var i=0; i < inputs.length; i++) {
    inputs[i].onchange = function() {
        var add = this.value * (this.checked ? 1 : -1);
        total.innerHTML = parseFloat(total.innerHTML) + add
        total1.innerHTML = parseFloat(total1.innerHTML) + add
    }
}

Here is my jsfiddle: http://jsfiddle.net/rynslmns/6NJ8e/10/

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/