javascript添加复选框检查值

我有一个复选框部分，用户可以选择添加功能。我需要将每个输入的值添加到要在#付款总额和#付款重新计价部分显示的金额中。基本上，如果他们选中两个复选框，#付款总额和#付款重新支付将=100。我能够获得第一个要添加/更改的号码，但也无法获得付款重新支付

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

额外功能（50美元/月）：


一款图片分享应用
审查现场监测
谷歌+
LinkedIn
品特烈
四方
Tumblr
广告
您的卡现在将收取0美元，此后您的订阅每月将收取0美元。您可以随时取消或更改计划。

我的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
    }
}

var inputs=document.getElementsByClassName（'sum'），
总计=document.getElementById（'payment-total'）；
total1=document.getElementById（“付款账单”）；
对于（变量i=0；i

这是我的JSFIDLE:

哎呀！打字错误

您的第二个跨度称为付款重新开票，而不是付款开票。这很有效

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

函数updateTotals（）{
var inputs=document.getElementById（'extra-features'）.getElementsByTagName（'input'）；
var总和=0；
for（变量i=0，num=inputs.length；i

JSFiddle：

使用jQuery（或类似工具）可以更简洁地编写这篇文章，因为您有一些DOM处理，但是没有它也不太糟糕

基本上，您有一个函数，可以对所有内容求和并更新字段

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

然后，在它们之间循环。如果选中了它们，将它们添加到总数中，然后只更新您的值

如果您使用了类似于选择器的CSS功能，您通常可以直接获取选中的输入（如$（“#extra features input:checked”），并跳过条件输入

然后，您只需要在每个输入中添加一个更改事件，该事件在任何时候发生更改时调用

updateTotals

函数

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

获取id“payment billed”，并将其副本分配给var total1。然后

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

仅更改一秒钟前创建的副本的innerHTML。试试jQuery：

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

通过这种方式，您可以对副本进行计算，然后用副本的innerHTML替换原始innerHTML

---

编辑——为了更清楚，您的原始代码只更改了本地副本total1。没有任何代码来更新原始的#付款重新开票元素。

唯一的问题是，每当用户取消选中该框并重新检查时，它就会开始变成负数。我添加了一个链接到该网站嗯，你能得到一把有这个问题的小提琴吗？您可能意外地将复选框的值更改为-50或其他值。首先选择帐单条款，然后选中“其他功能”中的所有选项，然后从选择框中选择“选择帐单条款”，然后开始取消选中复选框。你开始得到负数。哦，是的，问题是当你选择下拉列表时，你没有保持任何状态。您可以像其他答案一样在每次更改时计算它，也可以只跟踪这两个值：唯一的问题是，每当用户取消复选框并重新检查时，它开始变成负数。thesomii.com/getstarted/primeHi-Ryan。我不太确定您的具体实现中发生了什么，但我无法在JSFIDLE版本中重现这种行为。再次检查是否有其他值导致负值。在我写的版本中，它从零开始，只从零开始相加。首先选择帐单条款，然后选中“其他功能”中的所有选项，然后从选择框中选择“选择帐单条款”，然后开始取消选中复选框。你开始得到负数。这是因为你用了一种奇怪的方式来决定你的加法。如果您想继续使用该方法，它应该是0，而不是-1。这只是因为我无法让您的方法在JSFIDLE之外工作。当我将你的代码片段添加到我的代码中时，我没有得到任何功能。在我的网站上，有您的代码：

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

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