javascript添加复选框选中的值

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

哎呀！ 错字！

您的第二个跨度称为付款回单，而不是付款结算。 这有效

    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/

由于可以进行DOM处理，因此可以使用jQuery（或类似格式）更简洁地编写此代码，但是没有DOM也不错。

基本上，您有一个汇总所有内容并更新字段的函数。

为此，您需要保留所有输入。 我使用“额外功能”作为锚点，因为它是最接近ID的元素。

然后，遍历它们。 如果选中它们，则将它们添加到总计中，然后只需更新您的值即可。

如果使用的东西可以做类似CSS的选择器，通常可以直接获取已检查的输入（例如$（'＃extra-features input：checked'）），然后跳过条件输入。

然后，您只需要向每个输入添加一个change事件，即可在任何更改时调用updateTotals函数。

还有一点进一步的优化（取决于您的确切用法），您可以存储输入以供进一步使用，这样就不必每次都查找它们（但是如果您位于全局范围内，则不必这样做，仅当此函数将以某种方式封装时）。

Answer 3

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

获取ID为“付款方式”，并将其副本分配给var total1。 然后

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

仅更改您第二秒钟进行的COPY的innerHTML。 试试jQuery：

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

这样，您就可以对副本进行计算，然后用副本的innerHTML替换原始的innerHTML。

编辑-为了更加清楚，您的原始代码仅更改了本地副本total1。 没有任何代码可更新原始的＃payment-rebill元素。