JavaScript配列の合計値？

Question

私はこの質問のさまざまなバリエーションを見てきましたが、私は何をしているのかに特有のものを見つけることはできません。

私は動的にphp/mysqlクエリによって作成された入力フィールドを持っています。値は数値であり、彼らは、HTML結果の

<?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>'; 
    } 
?> 

共通クラスを共有：

<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

ここに1つの迅速なアプローチがあります。あなたはjQueryのを使用している場合、それはHTMLマークアップに直接そうすることよりも柔軟性だとして、あなたは一般的に、イベントハンドラを割り当てるためのjQueryを使用する必要がある、ということに注意してください：

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