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);

始终为false，导致附加值为负。

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

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

1 个答案: