javascript add checkbox-checked значения

Question

У меня есть флажок, который пользователи могут выбрать для добавления функций. Мне нужно, чтобы каждое значение ввода добавлялось к сумме, которая должна быть представлена ​​в разделе # payment-total и # payment-rebill. По сути, если они выбирают два из флажков, # payment-total и # payment-rebill будут = 100. Я могу получить первый номер, чтобы добавить/изменить, но также не удалось изменить # payment-rebill.

Вот мой 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> 

Моя 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 
    } 
} 

Вот мой jsfiddle: http://jsfiddle.net/rynslmns/6NJ8e/10/

Answer 1

Oops! Опечатка!

Ваш второй пролет называется платежом-rebill, не оплаченным. Это работает

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

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

Answer 2

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/

Это может быть написана немного более сжато с JQuery (или аналогичный), так как у вас есть некоторые обработки DOM, но это не так слишком плохо.

В принципе, у вас есть функция, которая суммирует все и обновляет ваши поля.

Для этого вам необходимо получить все входные данные. Я использовал «дополнительные функции» в качестве якоря, так как это был самый близкий элемент ID-ed.

Затем проведите через них. Если они отмечены, добавьте их в общую сумму, а затем просто обновите свои значения.

Если вы использовали что-то, что может делать селектор типа CSS, вы можете просто просто получить проверенные входы напрямую (например, $ ('# extra-features input: checked')) и пропустить условное.

Затем вам нужно добавить событие изменения на каждый вход, который вызывает функцию updateTotals в любое время, когда что-то меняется.

Немного дополнительной оптимизации (в зависимости от вашего использования), вы можете хранить входы для дальнейшего использования, поэтому вам не нужно каждый раз искать их (но не делайте этого, если вы находитесь в глобальная область действия, только если эта функция будет каким-то образом инкапсулирована).

Answer 3

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

Получает идентификатор «оплата-выставление счета» и присваивает его копию var total1. Затем

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

Изменяет только внутреннийHTML КОПИИ, сделанный вами второй раз. Попробуйте JQuery:

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

Таким образом, вы делаете расчеты на копии, а затем заменить оригинальный innerHTML с innerHTML данных копии.

EDIT - Чтобы сделать его более понятным, исходный код меняет только локальную копию total1.Не было никакого кода для обновления исходного элемента # payment-rebill.