Jquery sum из нескольких полей ввода, если один и тот же класс на одном входе

Ответ 1

У вас в значительной степени было это, просто нужно немного настроить JQuery для соответствующих селекторов

обновленный скрипт: http://jsfiddle.net/5gsBV/7/

$(document).on("change", ".qty1", function() {
    var sum = 0;
    $(".qty1").each(function(){
        sum += +$(this).val();
    });
    $(".total").val(sum);
});

Ответ 2

Я предлагаю это решение:

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

$(".qty1").on("blur", function(){
    var sum=0;
    $(".qty1").each(function(){
        if($(this).val() !== "")
          sum += parseInt($(this).val(), 10);   
    });

    $("#result").html(sum);
});

скрипка

Ответ 3

Я думаю, что ваша проблема здесь:

$("#destination").val(sum);

измените его на:

$(".total").val(sum);

И вместо change события я предлагаю вместо этого использовать keyup.

$(document).on("keyup"

Ответ 4

$(document).on("keyup", ".qty1", function() {
    var sum = 0;
    $(".qty1").each(function(){
        sum += +$(this).val();
    });
    $(".total").val(sum);
});

Ответ 5

Мы можем использовать следующую собственную функцию

 (function( $ ){
   $.fn.sum=function () {
    var sum=0;
        $(this).each(function(index, element){
            sum += parseFloat($(element).val());
        });
    return sum;
    }; 
})( jQuery );
//Call $('.abcd').sum();

http://www.gleegrid.com/code-snippet/javascript/jquery-sum-input-values-by-class/?filter=bygroup&group=JQuery

Ответ 6

У вас почти было это:

$(document).on("change", ".qty1", function() {
    var sum = 0;
    $(".qty1").each(function(){
        sum += +$(this).val();
    });
    $(".total").val(sum);
});

http://jsfiddle.net/DUKL6/ 1

Ответ 7

Проблема со всеми приведенными выше ответами заключается в том, что они терпят неудачу, если вы вводите что-то другое, кроме числа. Если вы хотите что-то более дружелюбное к пользователям, вы должны сделать некоторую проверку, возможно, даже дать некоторую обратную связь, когда вводится значение, отличное от числа.

$('body').on('change', '.qty1', function() {
    var total=0;
    $(".qty1").each(function(){
        quantity = parseInt($(this).val());
        if (!isNaN(quantity)) {
            total += quantity;
        }
    });
    $('.total').val('Total: '+total);
});

Ответ 8

$('.qty1').each(function(){
  sum += parseFloat(this.value);
   });
console.log(sum);