javascript添加复选框选中的值答案

【问题标题】：javascript add checkbox-checked valuesjavascript添加复选框选中的值
【发布时间】：2014-02-21 22:47:36
【问题描述】：

我有一个复选框部分，用户可以选择它来添加功能。我需要将每个输入的值添加到要在#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/

【问题讨论】：

标签： javascript html css checkbox sum

【解决方案1】：

哎呀！错字！

您的第二个跨度称为 payment-rebill 而不是 payment-billed。这行得通

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

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

【讨论】：

唯一的问题是，每当用户取消选中该框并重新选中时，它就会开始变为负数。我添加了指向该网站的链接thesomii.com/getstarted/prime
嗯，你能得到一个有这个问题的小提琴吗？您可能不小心将复选框的值更改为 -50 或其他值。
jsfiddle.net/rynslmns/uZbee 首先选择一个计费期限，然后选中额外功能中的所有选项，然后从选择框中选择选择计费期限，然后开始取消选中复选框。你开始得到负数。
哦，是的，问题是当你选择一个下拉菜单时你没有保持任何状态。您可以像其他答案一样在每次更改时计算它，或者只跟踪两个值：jsfiddle.net/uZbee/2

【解决方案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 元素。

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

如果你使用了类似 CSS 的选择器，你通常可以直接获取选中的输入（如 $('#extra-features input:checked')）并跳过条件。

然后，您只需向每个输入添加一个更改事件，该事件会在任何时候发生更改时调用updateTotals 函数。

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

【讨论】：

唯一的问题是，每当用户取消选中该框并重新选中时，它就会开始变为负数。 thesomii.com/getstarted/prime
嗨瑞恩。我不太确定您的具体实现中发生了什么，但我无法重现 JSFiddle 版本中的行为。仔细检查您是否没有其他导致负面影响的值。在我写的版本中，它从零开始，只从那里添加。
jsfiddle.net/rynslmns/uZbee 首先选择一个计费期限，然后选中额外功能中的所有选项，然后从选择框中选择选择计费期限，然后开始取消选中复选框。你开始得到负数。
这是因为您使用这种奇怪的方式来决定您的添加。如果你想继续使用那个方法，它应该是0，而不是-1。
只是因为我无法让您在 JSFIDDLE 之外工作。当我将您的 sn-p 添加到我的代码中时，我没有获得任何功能。这是我的网站上的代码：thesomii.com/getstarted/basic

【解决方案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 元素。

【讨论】：