概要

みなさんこんにちわ！本日は、input type="hidden" の中に入った要素の数字を合計してHTML5で表示すると言うものです。

仕様

やりたかったことは、ECサイトを作っていて、dbからお客様のカートの情報を取得し、カートに入った商品の合計値をフロント側で表示を調整するというもの

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input type="hidden" class='num_parts' value="0" />
<input type="hidden" class='num_parts' value="2" />
<span id="total"></span>

<script>
       var calculated_total_sum = 0;
       $(".num_parts").each(function () {
           var get_textbox_value = $(this).val();
           if ($.isNumeric(get_textbox_value)) {
              calculated_total_sum += parseFloat(get_textbox_value);
              }                  
            });
        $("#total").html(calculated_total_sum);
</script>

説明

ここで、htmlの要素のclassを取得して、eachで回しています

$(".num_parts").each(function () {

ここで、inputの数字をそれぞれ足し算しています

calculated_total_sum += parseFloat(get_textbox_value);

ここで、最終の合計値をhtmlへ描画しています

$("#total").html(calculated_total_sum);