如果一个输入中有相同的类，则多个输入字段的 jquery 总和
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24126819/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery sum of multiple input fields if same class in one input
提问by Andrei
Hello I need to sum the values of same class input in one input with class name total.
您好，我需要将一个输入中的相同类输入的值与类名总计相加。
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="total" value="" />
Possible?
可能的？
$(document).on("change", "qty1", function() {
var sum = 0;
$("input[class *= 'qty1']").each(function(){
sum += +$(this).val();
});
$(".total").val(sum);
});
回答by Adjit
You pretty much had it, just needed to adjust your JQuery a little bit for the appropriate selectors
你几乎拥有它，只需要为适当的选择器稍微调整你的 JQuery
updated fiddle : http://jsfiddle.net/5gsBV/7/
更新小提琴：http: //jsfiddle.net/5gsBV/7/
$(document).on("change", ".qty1", function() {
var sum = 0;
$(".qty1").each(function(){
sum += +$(this).val();
});
$(".total").val(sum);
});
回答by Alex Char
I suggest this solution:
我建议这个解决方案：
html
html
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="total" value="" />
<div id="result"></div>
js
js
$(".qty1").on("blur", function(){
var sum=0;
$(".qty1").each(function(){
if($(this).val() !== "")
sum += parseInt($(this).val(), 10);
});
$("#result").html(sum);
});
回答by Jai
I think your issue is here:
我认为你的问题在这里：
$("#destination").val(sum);
change it to:
将其更改为：
$(".total").val(sum);
And instead of changeevent i suggest you to use keyupinstead.
而不是change事件，我建议你keyup改用。
$(document).on("keyup"
回答by vinod kumar
$(document).on("keyup", ".qty1", function() {
var sum = 0;
$(".qty1").each(function(){
sum += +$(this).val();
});
$(".total").val(sum);
});回答by Rahman
$('.qty1').each(function(){
sum += parseFloat(this.value);
});
console.log(sum);
回答by Karthik Vaithiyanathan
We can use following own function
我们可以使用以下自己的功能
(function( $ ){
$.fn.sum=function () {
var sum=0;
$(this).each(function(index, element){
sum += parseFloat($(element).val());
});
return sum;
};
})( jQuery );
//Call $('.abcd').sum();
回答by Karthik Vaithiyanathan
You almost had it:
你几乎拥有它：
$(document).on("change", ".qty1", function() {
var sum = 0;
$(".qty1").each(function(){
sum += +$(this).val();
});
$(".total").val(sum);
});
回答by jme11
The problem with all of the above answers is that they fail if you enter something other than a number. If you want something that is more friendly to users, you should do some validation, perhaps even give some feedback when a value other than a number is entered.
上述所有答案的问题在于，如果您输入数字以外的内容，它们就会失败。如果你想要一些对用户更友好的东西，你应该做一些验证，甚至可能在输入一个数字以外的值时给出一些反馈。
$('body').on('change', '.qty1', function() {
var total=0;
$(".qty1").each(function(){
quantity = parseInt($(this).val());
if (!isNaN(quantity)) {
total += quantity;
}
});
$('.total').val('Total: '+total);
});
