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

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

この記事を書いた人

コメント

コメントする

CAPTCHA


目次