jQuery obliczyć sumę wartości we wszystkich polach tekstowych

Question

Mam formularz zamówienia z około 30 polami tekstowymi, które zawierają wartości liczbowe. Chciałbym obliczyć sumę wszystkich tych wartości podczas rozmycia.

W jaki sposób wybrać wszystkie pola tekstowe, ale nie można ich przeglądać i dodawać wszystkie ich wartości?

$(document).ready(function(){ 
    $(".price").blur(function() { 
    //loop and add up every value from $(".price").val() 
    }) 
}); 

Answer 1

$('.price').blur(function() { 
    var sum = 0; 
    $('.price').each(function() { 
     sum += Number($(this).val()); 
    }); 

    // here, you have your sum 
});​​​​​​​​​ 

Answer 2

Użyj tej funkcji:

$(".price").each(function(){ 
total_price += parseInt($(this).val()); 
}); 

Answer 3

To powinno go naprawić:

var total = 0; 
$(".price").each(function(){ 
      total += $(this).val() * 1; 
}); 

Answer 4

$(".price").each(function(){ 
total_price += parseFloat($(this).val()); 
}); 

spróbuj jak jes s ...

Answer 5

Nieco bardziej ogólna funkcja kopiowania/wklejania dla twojego projektu.

sumjq = function(selector) { 
    var sum = 0; 
    $(selector).each(function() { 
     sum += Number($(this).text()); 
    }); 
    return sum; 
} 

console.log(sumjq('.price')); 

Answer 6

Podobnie wzdłuż linii tych odpowiedzi pisemnych jako plugin:

$.fn.sum = function() { 
    var sum = 0; 
    this.each(function() { 
     sum += 1*($(this).val()); 
    }); 
    return sum; 
}; 

Dla przypomnienia 1 * x jest większa niż liczba (x) w Chrome

Answer 7

$('.price').blur(function() { 
    var sum = 0; 
    $('.price').each(function() { 

     if($(this).val()!="") 
     { 
      sum += parseFloat($(this).val()); 
     } 

    }); 
     alert(sum); 
});​​​​​​​​​ 

JS Fiddle

Answer 8

Jeśli nie potrzebujesz obsługi IE 8 następnie możesz użyć natywnej metody Javascript Array.prototype.reduce(). trzeba będzie przekształcić obiekt JQuery do tablicy pierwszy:

var sum = $('.price').toArray().reduce(function(sum,element) { 
    return sum + Number(element.value); 
}, 0); 

referencyjny: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce