javascript 添加选择和复选框值///获取负数

Question

我需要能够让用户从选择下拉列表中选择一个计费条款，然后选择复选框以添加到总数中。它似乎在 JSFIDDLE 上运行得相对较好，但在我的网站上，在某些情况下，选中所有复选框，然后通过选择“选择计费期限”将总数重置为 0，然后取消选中所有选项将导致负数。有没有人有什么建议？即使选中和取消选中选项也会开始得到负数。

HTML:

<div class="payment-term">
  <label>Billing period:</label>
  <select id="billing-price" name="billing-term" class="selectpicker">
    <option value="0">Choose billing term</option>
    <option value="300">12 Months: $300/mo. (Save 20%)</option>
    <option value="350">1 Month: $350/mo.</option>
  </select><br><br>
  <label>Extra Features ($50/month): </label>
</div>

<section id="extra-features">
  <div class="span3">
    <label class="checkbox" for="Checkbox1">
      <input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Instagram
    </label>
    <label class="checkbox">
      <input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Review site monitoring
    </label>
    <label class="checkbox">
      <input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Google+
    </label>
    <label class="checkbox">
      <input type="checkbox" class="sum" value="50" data-toggle="checkbox"> LinkedIn
    </label>
  </div>
  <div class="span3">
    <label class="checkbox">
      <input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Pinterest
    </label>
    <label class="checkbox">
      <input type="checkbox" class="sum" value="50" data-toggle="checkbox"> FourSquare
    </label>
    <label class="checkbox">
      <input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Tumblr
    </label>
    <label class="checkbox">
      <input type="checkbox" class="sum" value="50" 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 select = document.getElementById('billing-price');
select.addEventListener('change', updatePrice, false);
var price = 0;
var additional = 0;

function updatePrice(e) {
    price = parseFloat(select.value);
    document.getElementById('payment-total').innerText = price + additional;
    if (price == select.options[2].value){
    document.getElementById('payment-rebill').innerText = 0 + additional; 
    } else {
    document.getElementById('payment-rebill').innerText = price + additional;
    }
}
var inputs = document.getElementsByClassName('sum'),
    total  = document.getElementById('payment-total');
    total2 = document.getElementById('payment-rebill');

for (var i=0; i < inputs.length; i++) {
    inputs[i].onchange = function() {
        var add = this.value * (this.checked ? 1 : -1);
        additional += add
        total.innerHTML = price + additional
        total2.innerHTML = price + additional
    }
}

工作 jsfiddle:http://jsfiddle.net/uZbee/2/
我的网站(无法正常工作):http://thesomii.com/getstarted/basic/

我正在为我的复选框使用一个 javascript 文件来使它们具有更好的外观。我担心它可能会影响我的复选框总和的 javascript 代码。

Answer 1

负值是输入没有检查造成的，所以这一行的this.checked

var add = this.value * (this.checked ? 1 : -1);

始终为假，导致附加值为负数。

将 this.checked 更改为 this.parentNode.className.split("").indexOf("checked") > -1 可能会有帮助。

for (var i=0; i < inputs.length; i++) {
    inputs[i].onchange = function() {
        var add = this.value * (this.parentNode.className.split(" ").indexOf("checked") > -1 ? 1 : -1);
        additional += add
        total.innerHTML = price + additional
        total2.innerHTML = price + additional
    }
}