【jQueryで実装】
選択した項目の合計金額を表示させる方法

LPコーディングなどで少し凝った動きのある実装がでてきた…
JSのコードは調べれば出てくるけれど、jQuery版の参考情報も知りたい…

このようなお悩みありませんか？　はい、これ自分のことです。

この記事では「選択した項目の合計金額を表示させる方法」をご紹介します。
（実務で遭遇した実装なので、共有です。）

特に未経験からWeb制作学習をされている方は、アニメーションなど動きをつける実装内容でjQueryを学んだ方が多いかと思います。
この記事を読むことで、jQueryでの実装の知見がまた1つ増えれば幸いです。

選択した項目の合計金額を表示させる方法

実装結果とコードはこちら。
フルーツ、サイズそして梱包の種類をクリックしてみてください。

See the Pen
項目選択→合計金額の表示 by なかじん | 公務員→Web制作フリーランス (@gin_you80)
on CodePen.

jQueryでの記述はこちら

$(function(){
    // selectの変更があった場合
    $("select").on("change",function(){
　　//初期化して
    var sum = 0;
    // それぞれのselectタグについて
    $("select").each(function(){

        // 選択した値(value)を代入して
        var selected = $(this).val();

        // optionタグのvalueを「：」で分割して、数値の部分を取得・代入する。
      　// みかんの場合　→　value="みかん：300" → 300取得
        var val = Number(selected.split(":")[1]);

        // 合計計算
        sum += val;
    });

    // id="sum_text"に合計金額を表示
    $("#sum_text").text("合計金額：" + sum + "円");
    });
});

ポイント

• select タグ、optionタグを用います。
• 1グループの中で複数を選択する場合は、このjsの記述だと動きません。
  （みかんもりんごも選びたいなど）

複数選択する場合の参考記事はこちら↓
https://pisuke-code.com/jquery-get-select-multiple-values/

JSのコードにあるコメントアウトのように、「この1行が何をしている工程なのか」少しずつ理解しながら進めたいですね😌
徐々にコードと仲良しになれるのかなぁと。