汇总复选框值并写入输入字段 [英] Add up Checkbox Values and Write to Input Field
问题描述
我有一个带有一些复选框和一个Javascript代码段的表单,其中的复选框值被加起来并写入到<span>
中.效果很好,但我真的很希望它写到输入文本字段而不是<span>
.
I have a form with some checkboxes and a Javascript snippet where the checkbox values get added up and written to a <span>
. That works fine but I would really like it to write to an input text field instead of the <span>
.
这是我表单的复选框部分:
Here is the checkbox section of my form:
<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>
这是JavaScript当前正在写入的<span>
:
This is the <span>
that the javascript is writing to currently:
<span id="payment-total" style="text-decoration:underline;">0</span>
这是JavaScript:
And here is the 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
}
}
}
推荐答案
您不需要循环.使用jQuery的change()代替onchange.它有一个隐式循环.此外,使用jQuery进行检查的输入比定制的JS更可靠.这是一个最小的工作示例:
You don't need the loop. Use jQuery's change() instead of onchange. It has an implicit loop. Also using jQuery for checked inputs is more reliable than custom tailored JS. Here's a minimal working example:
$(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/
这篇关于汇总复选框值并写入输入字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!