加起來的複選框值和寫入輸入字段

Question

我有一個表格，其中有一些複選框和一個Javascript代碼段，其中複選框的值被加起來並寫入<span>。這工作正常，但我真的很喜歡它寫入輸入文本字段而不是<span>。

這裏是我的表單的複選框部分：

<section id="extra-features"> 
<div class="checkbox"> 
<label><input type="checkbox" name="checkbox" id="outside" class="sum" value="10" data-toggle="checkbox"> Outside Wash</label> 
</div><br/> 
<div class="checkbox"> 
<label><input type="checkbox" name="checkbox" id="aclean" class="sum" value="39" data-toggle="checkbox"> A - Clean: Wash Vacuum, Windows, Wheels/Tires, Wax</label> 
</div><br/> 
<div class="checkbox"> 
<label><input type="checkbox" name="checkbox" id="bclean" class="sum" value="0" data-toggle="checkbox"> B - Clean: Same as A above <em>PLUS:</em> Shampoo Interior, Clean/Dress Interior Panels, Remove Bugs/Tar.</label> 
</div><br/> 
<div class="checkbox"> 
<label><input type="checkbox" name="checkbox" id="cclean" class="sum" value="109" data-toggle="checkbox"> C - Clean: Same as B above <em>PLUS:</em> Compound Polish Exterior, Clean/Dress Moldings as Needed. </label> 
</div> 
</section> 

這是<span>的JavaScript是寫目前：

<span id="payment-total" style="text-decoration:underline;">0</span> 

這裏是JavaScript：

window.onload=function(){ 
var inputs = document.getElementsByClassName('sum'), 
    total = document.getElementById('payment-total'); 

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

Answer 1

你不需要循環。使用jQuery的change（）而不是onchange。它有一個隱式循環。同樣使用jQuery進行檢查輸入比定製的JS更可靠。下面是一個最小的工作示例：

$(document).ready(function() { 
 
    function updateSum() { 
 
     var total = 0; 
 
     $(".sum:checked").each(function(i, n) {total += parseInt($(n).val());}) 
 
     $("#total").val(total); 
 
    } 
 
    // run the update on every checkbox change and on startup 
 
    $("input.sum").change(updateSum); 
 
    updateSum(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<section id="extra-features"> 
 
<div class="checkbox"> 
 
<label><input type="checkbox" name="checkbox" id="outside" class="sum" value="10" data-toggle="checkbox"> Outside Wash</label> 
 
</div><br/> 
 
<div class="checkbox"> 
 
<label><input type="checkbox" name="checkbox" id="aclean" class="sum" value="39" data-toggle="checkbox"> A - Clean: Wash Vacuum, Windows, Wheels/Tires, Wax</label> 
 
</div><br/> 
 
<div class="checkbox"> 
 
<label><input type="checkbox" name="checkbox" id="bclean" class="sum" value="0" data-toggle="checkbox"> B - Clean: Same as A above <em>PLUS:</em> Shampoo Interior, Clean/Dress Interior Panels, Remove Bugs/Tar.</label> 
 
</div><br/> 
 
<div class="checkbox"> 
 
<label><input type="checkbox" name="checkbox" id="cclean" class="sum" value="109" data-toggle="checkbox"> C - Clean: Same as B above <em>PLUS:</em> Compound Polish Exterior, Clean/Dress Moldings as Needed. </label> 
 
</div> 
 
</section> 
 
<input type="text" id="total">

工作樣本：https://jsfiddle.net/3veu206r/

Answer 2

你必須爲jQuery做點

$(total).val(parseFloat(total.innerHTML) + add); 

對於JavaScript

total.value parseFloat(total.innerHTML) + add; 

Answer 3

與您的代碼：

參見：https://msdn.microsoft.com/en-us/library/ms535126(v=vs.85).aspx

window.onload=function(){ 
 
var inputs = document.getElementsByClassName('sum'), 
 
    total = document.getElementById('payment-total'); 
 

 
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 
 
     var new_total = parseFloat(document.getElementById('input').value); 
 
     console.log(new_total); 
 
     document.getElementById('input').value=new_total + add 
 
    } 
 
    } 
 
}

<section id="extra-features"> 
 
<div class="checkbox"> 
 
<label><input type="checkbox" name="checkbox" id="outside" class="sum" value="10" data-toggle="checkbox"> Outside Wash</label> 
 
</div><br/> 
 
<div class="checkbox"> 
 
<label><input type="checkbox" name="checkbox" id="aclean" class="sum" value="39" data-toggle="checkbox"> A - Clean: Wash Vacuum, Windows, Wheels/Tires, Wax</label> 
 
</div><br/> 
 
<div class="checkbox"> 
 
<label><input type="checkbox" name="checkbox" id="bclean" class="sum" value="0" data-toggle="checkbox"> B - Clean: Same as A above <em>PLUS:</em> Shampoo Interior, Clean/Dress Interior Panels, Remove Bugs/Tar.</label> 
 
</div><br/> 
 
<div class="checkbox"> 
 
<label><input type="checkbox" name="checkbox" id="cclean" class="sum" value="109" data-toggle="checkbox"> C - Clean: Same as B above <em>PLUS:</em> Compound Polish Exterior, Clean/Dress Moldings as Needed. </label> 
 
</div> 
 
</section> 
 
This is the <span> that the javascript is writing to currently: 
 

 
<span id="payment-total" style="text-decoration:underline;">0</span> 
 
<input id="input" type="text" value="0"/>