提问人：Craig 提问时间：4/9/2015 更新时间：4/9/2015 访问量：1229
将所有具有特定类名的文本框相加？
Sum up all text boxes with a particular class name?
问：
我有一个网格，其中一列包含一个文本框，用户可以在其中输入美元金额。文本框声明为：
<input class="change-handled" sub-category-id="83" data-id="" style="text-align: right; width: 100%" type="number" value="">
有些都装饰有“change-handled”类。
我需要做的是，使用 javascript/jquery，汇总所有使用该类的框，并在屏幕上的其他地方显示总数。
我怎么能有一个全局事件，这将允许在我退出其中一个框（即：Tab out 或 ENTER out）时发生这种情况。
目前，我有一个事件，目前没有多大作用，将使用它：
$('body').on('change', 'input.change-handled', SaveData);
function SaveData() {
var dataId = $(this).attr('data-id');
var categoryId = $(this).attr('sub-category-id');
var value = $(this).val();
}
如何使用该 SaveData 事件来查找所有具有“更改处理”类的编辑框，汇总它们的值并将其显示在某处？
答：
1赞
itdoesntwork
4/9/2015
#1
以下是对这些值求和的方法：
var total = 0;
$(".change-handled").each(function(index, box) {
total += parseInt($(box).val(), 10);
});
然后，您将在元素上使用 jQuery 提供的 or 函数来显示它们。texthtml
这可以在代码中的任何位置使用，包括事件处理程序。
1赞
Ben
4/9/2015
#2
我认为你要找的是模糊事件。
$('body').on('blur', 'input.change-handled', UpdateTotal);
function UpdateTotal() {
var total = 0;
var $changeInputs = $('input.change-handled');
$changeInputs.each(function(idx, el) {
total += Number($(el).val());
});
$('.total').text(total);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" class="change-handled">
<input type="number" class="change-handled">
<input type="number" class="change-handled">
Total: $<span class="total">0</span>
2赞
Miguel Mota
4/9/2015
#3
在纯 JavaScript 中：
var changeHandled = [].slice.call(document.querySelectorAll('.change-handled'));
var total = document.querySelector('.total');
function calc() {
total.textContent = changeHandled.reduce(function(total, el) {
return total += Number(el.value);
}, 0);
}
changeHandled.forEach(function(el) {
el.onblur = calc;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" class="change-handled">
<input type="number" class="change-handled">
<input type="number" class="change-handled">
Total: $<span class="total">0</span>
评论