Question

我有一个复选框部分，用户可以选择添加功能。我需要将每个输入的值添加到要在＃payment-total和＃payment-rebill部分中显示的总和中。基本上，如果他们选择了两个复选框，＃payment-total和＃payment-rebill将= 100.我能够获得第一个要添加/更改的号码，但是也无法让＃payment-rebill更改。< / p>

这是我的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/

这可以用jQuery（或类似的）更简洁地编写，因为你有一些DOM处理，但没有它也不会太糟糕。

基本上，你有一个功能可以对所有内容进行求和并更新你的字段。

要做到这一点，您需要掌握所有输入。我使用“extra-features”作为锚，因为它是最接近的ID-ed元素。

然后，循环遍历它们。如果选中它们，请将它们添加到总数中，然后只更新您的值。

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

然后，您只需要为每个输入添加一个更改事件，每次输入都会调用updateTotals函数。

进一步优化（取决于您的确切用法），您可以存储输入以供进一步使用，因此您不必每次都查找它们（但如果您在全局范围，只有在以某种方式封装此函数时）。

Answer 3

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

获取ID“payment-billed”并将其副本分配给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元素。

javascript添加复选框选中的值

3 个答案: