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

Здравствуйте, мне нужно суммировать значения одного и того же ввода класса в одном входе с общим именем класса.

<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="" />

Возможные?

Рабочая скрипка здесь

$(document).on("change", "qty1", function() {
    var sum = 0;
    $("input[class *= 'qty1']").each(function(){
        sum += +$(this).val();
    });
    $(".total").val(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);
});

Ответ 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);