【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行が何をしている工程なのか」少しずつ理解しながら進めたいですね😌
徐々にコードと仲良しになれるのかなぁと。