jQuery вычисляет сумму значений во всех текстовых полях

У меня есть форма заказа с примерно 30 текстовыми полями, которые содержат числовые значения. Я хотел бы рассчитать сумму всех этих значений на размытие.

Я знаю, как выбрать все текстовые поля, но не как перебирать их и складывать все их значения?

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

8 ответов:

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

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

немного более общая функция копирования / вставки для вашего проекта.

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

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

Если вам не нужно поддерживать IE8, то вы можете использовать собственный Javascript Array.prototype.reduce() метод. Сначала вам нужно будет преобразовать объект JQuery в массив:

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

Ссылка: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

6

аналогично по строкам этих ответов написано как плагин:

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

для записи 1 * x быстрее, чем число(X) в Chrome

4

использовать эту функцию:

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

это должно исправить:

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

пожалуйста, попробуйте такой...

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

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

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

JS Fiddle

0