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