сумма значений массива JavaScript?

Question

Я посмотрел на множество различных вариантов этого вопроса, но я не могу найти тот, который относится к тому, что я делаю.

У меня есть поля ввода, которые динамически создаются php / mysqlзапрос.значения являются числами, и они имеют общий класс

<?php
   foreach ($garment_sizes as $key =>$value){echo '<input type="number" class="size_select" name="'.$value.'" onchange="qty_update()"/><label class="size_label">'. strtoupper($value).'</label>';
   }
?>

Полученный HTML:

<input type="number" class="size_select" name="s" onchange="qty_update()"/>
<label class="size_label">S</label>
<input type="number" class="size_select" name="m" onchange="qty_update()"/>
<label class="size_label">M</label> <!-- etc -->

Я хочу создать функцию для суммирования всех полей с этим классом "size_select"

function qty_update(){
    var values = $('.size_select').serializeArray();
    //having trouble writing the loop here to sum the array..
}

Answer 1

Для суммирования всех полей, соответствующих определенному селектору, вы можете сделать это:

var total = 0;
$('.size_select').each(function() {
    total += parseInt($(this).val(), 10) || 0;
});

// the variable total holds the sum here

В функциональной форме:

function sumSizes() {
    var total = 0;
    $('.size_select').each(function() {
        total += parseInt($(this).val(), 10) || 0;
    });
    return(total);
}

Answer 2

Вот один быстрый подход. Обратите внимание, что если вы используете jQuery, вы должны обычно использовать jQuery для назначения обработчиков событий, поскольку это более гибко, чем делать это непосредственно в разметке HTML:

$('input.size_select').change(function() {
    var sum = 0;
    $('input.size_select').each(function() {
         sum += parseInt($(this).val()) || 0
    });
    console.log(sum);
});