javascript添加复选框选中的值

问题描述

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

这是我的html：

 < section id =extra -features> 
< label class =header>额外功能（每月$ 50）：< / label>< br>< br& 
< div class =span3> 
< label class =checkboxfor =Checkbox1> 
< input value =50type =checkboxid =Checkbox1value =option1data-toggle =checkbox> Instagram 
< / label> 
< label class =checkbox> 
< input value =50type =checkboxid =Checkbox2value =option2data-toggle =checkbox>查看网站监控
< / label> 
< label class =checkbox> 
< input value =50type =checkboxid =Checkbox3value =option3data-toggle =checkbox> Google+ 
< / label> 
< label class =checkbox> 
< input value =50type =checkboxid =Checkbox4value =option4data-toggle =checkbox> LinkedIn 
< / label> 
< / div> 
< div class =span3> 
< label class =checkbox> 
< input value =50type =checkboxid =Checkbox5value =option5data-toggle =checkbox> Pinterest 
< / label> 
< label class =checkbox> 
< input value =50type =checkboxid =Checkbox6value =option6data-toggle =checkbox> FourSquare 
< / label> 
< label class =checkbox> 
< input value =50type =checkboxid =Checkbox7value =option7data-toggle =checkbox> Tumblr 
< / label> 
< label class =checkbox> 
< input value =50type =checkboxid =Checkbox8value =option8data-toggle =checkbox>广告
< / label> 
< / div> 
< / section> 
 
< div class =card-charge-info> 
您的信用卡将收取$< span id =payment-total> 0< / span>现在，您的订阅将支付$< span id =payment-rebill> 0< / span>之后每个月。您可以随时取消或更改计划。 
< / 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：

解决方案

糟糕！ Typo！

您的第二个期间称为付款重新计费，而不是付款。这工作

  total1 = document.getElementById（'payment-rebill'）; 
  

I have a checkbox section that users can select to add features. I need each input's value to add to a sum to be presented in the #payment-total and #payment-rebill section. Essentially, if they select two of the checkboxes, #payment-total and #payment-rebill would = 100. I am able to get the first number to add/change, but having trouble getting #payment-rebill to change as well.

Here is my 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>

My 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
    }
}

Here is my jsfiddle: http://jsfiddle.net/rynslmns/6NJ8e/10/

解决方案

Oops! Typo!

Your second span is called payment-rebill not payment-billed. This works

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

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

这篇关于javascript添加复选框选中的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！