jQuery berechnet die Summe der Werte in allen Textfeldern

Ich habe ein Bestellformular mit ca. 30 Textfeldern, die numerische Werte enthalten. Ich möchte die Summe all dieser Werte bei Unschärfe berechnen.

Ich weiß, wie man alle Textfelder auswählt, aber nicht, wie man sie durchläuft und alle ihre Werte addiert.

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

.

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

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

Eine etwas allgemeinere Funktion zum Kopieren / Einfügen für Ihr Projekt.

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

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

Wenn Sie IE8 nicht unterstützen müssen, können Sie die native Javascript- Array.prototype.reduce()Methode verwenden. Sie müssen zuerst Ihr JQuery-Objekt in ein Array konvertieren:

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

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

Ähnlich wie bei diesen Antworten, die als Plugin geschrieben wurden:

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

Für den Datensatz ist 1 * x schneller als Nummer (x) in Chrome

Verwenden Sie diese Funktion:

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

Dies sollte das Problem beheben:

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

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

bitte versuchen Sie es so ...

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

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

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

JS Fiddle

Dies wird zu 100% funktionieren:

<script type="text/javascript">

function calculate(){
var result = document.getElementById('result');
var el, i = 0, total = 0; 
while(el = document.getElementById('v'+(i++)) ) {
el.value = el.value.replace(/\\D/,"");
total = total + Number(el.value);
}
result.value = total;
if(document.getElementById('v0').value =="" && document.getElementById('v1').value =="" && document.getElementById('v2').value =="" ){
 result.value ="";
}
}
</script>
Some number:<input type="text" id ="v0" onkeyup="calculate()"><br>
Some number:<input type="text" id ="v1" onkeyup="calculate()"><br>
Some number:<input type="text" id ="v2" onkeyup="calculate()"><br>
Result: <input type="text" id="result" onkeyup="calculate()"  readonly><br>