質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • JavaScript

    16440questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

javaScriptを使いチェックボックスを使用し金額を変更したい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 302

ziyuu

score 16

 javaScriptを使いチェックボックスを使用し金額を変更したい

元の金額にチェックボックスにチェックを入れることで表示している金額をへんこうしたい。
複数選択の場合もあり

例)
A商品 24,840円←元の金額

オプションとして
B商品を追加 29,160円
さらに
C商品を追加 29,660円

このようにA商品が元となりB商品、C商品の追加により金額の表示を変更したいです。

 発生している問題・エラーメッセージ

以下の書き方だと、どちらかの計算しか反映されません。
javaScript

<script>
///チェックによる金額の変更
$(function () {
    var other = $('input[name="option_easel[]"]:checked').val();
    option_easel(other);

    $(".option_easel").change(function () {
            option_easel($(this).prop("checked"));
    });

    var other = $('input[name="option_bag[]"]:checked').val();
    option_bag(other);

    $(".option_bag").change(function () {
            option_bag($(this).prop("checked"));
    });

});

function option_easel(ischecked) {
        ischecked ? $('.item_price span').text("29,160") : $('.item_price span').text("24,840");
};

function option_bag(ischecked) {
        ischecked ? $('.item_price span').text("25,340") : $('.item_price span').text("24,840");
};

</script>


HTEML

<div>
    <section>
        <div id="item">
            <p class="item_name">額(中)</p>
            <p class="item_price"><span>24,840</span>円(税込)</p>    </div>
    </section>
    <section>
        <form action="/namae/order/step02" method="post" class="form-horizontal" autocomplete="off">
                        <div class="form-group">
                    <div class="col-sm-4 control-label"><label>有料オプション</label></div>
                    <div class="col-sm-7">
                        <div><label class="checkbox-inline"><input type="checkbox" class="option_easel" name="option_easel[]" value="1">イーゼル(額立て)+4,320円(税込)</label></div>
                        <div><label class="checkbox-inline"><input type="checkbox" class="option_bag" name="option_bag[]" value="1" checked="checked">手提げ袋 +500円(税込)</label></div>
                        <hr>
                    </div>
                </div>
        </form>
    </section>
</div>

 補足情報(FW/ツールのバージョンなど)

PHPはなんとなくわかりますが、javaScriptの初心者で、他の人が作ったのを変更しています。
大変恐縮ですが、ご教授のほどよろしくおねがいします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2018/05/26 15:40

    ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

    キャンセル

  • ziyuu

    2018/05/28 11:24

    やりたいことは、表示されている金額をチェックボックスの有無で変わるようにしたいということです。わかりにくくなるためコードは書かないほうが良かったかもしれません。失礼しました。

    キャンセル

回答 1

checkベストアンサー

+1

まず方針として、初期の金額に対してちゃんと加算の処理を書いていないのが問題かと思います。
加算をするうえで、表示している金額は,が入った文字列なので数字として扱いやすいように data-*="value" のようなカスタムデータ属性を持つのが良いかと思います

<p class="item_price"><span id="total_price" data-price="24840">24,840</span>円(税込)</p>
<div><label class="checkbox-inline"><input type="checkbox" class="option_item option_easel" name="option_easel[]" value="1" data-price="4320">イーゼル(額立て)+4,320円(税込)</label></div>

また、チェックボックスのクリックに対するイベント処理ですが、個別に書かずに共通のクラスを定義して一か所で行うことで、この後チェックボックスが増えても共通の処理で書くことが可能なのでそちらをお勧めします。

  let total = $("#total_price");
  let total_price = Number(total.data("price"));
  // 合計金額の初期化
  $("input.option_item:checked").each(function(index, item){
     // total_price = total_price + Number($(item).data('price'));
      total_price = total_price + $(item).data('price');  // Number不要でした。暗黙的に数値にしてくれます
  });
  total.data('price', total_price);
  total.text(total_price.toLocaleString());

  // チェックボックスクリック時の処理
  $(".option_item").change(function(event) {
    let option_item = $(event.target);

    if (option_item.prop('checked')) {
      // total_price = total_price + Number(option_item.data('price'));
      total_price = total_price + option_item.data('price');
    } else {
      // total_price = total_price - Number(option_item.data('price'));
      total_price = total_price - option_item.data('price');
    }
    total.data('price', total_price);
    total.text(total_price.toLocaleString());
  });

以下のURLに以上を踏まえた実装例をあげておきます

https://jsfiddle.net/euledge/5qtbr0cz/
https://jsfiddle.net/euledge/1xpLz65t/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/28 11:16

    ご返答ありがとうございます。
    また、わかりにくい質問を読み取っていただきありがとうございます。

    いただいたコードをそのまま貼り付けたところ動きませんでした。

    いただいたコードについて質問ですが、
    HTMLにて追加した『data-price="4320"』は
    javaScriptではif文内の『total_price = total_price + Number(option_item.data('price'));』で呼び出されているのでしょうか?

    大変恐縮ですが、よろしくおねがいします。

    キャンセル

  • 2018/05/28 12:27

    すみません、まずは添付したリンク先が誤っていたようなので、実行できるサンプルのリンクを張りなおしました。そちらで動作の確認ができるかと思います。

    "data-*" というのはHTML5で採用された非表示のカスタムデータ属性と呼ばれるものです。
    これを使用することで任意の値をデータとしてDOM要素に付加できるので今回のように表示文字から値を得るのが難しいようなものに使用するのに適していると思います。

    またこの属性にjqueryからアクセスするために data() を使用しています。

    下記URLに詳しい説明があります。
    http://dresscording.com/blog/html5/custom_data_attribute.html

    キャンセル

  • 2018/05/28 13:29

    "data-*"については勉強不足でした。
    ありがとうございます。

    また、いただいたデモを参考に作成したところ理想通りの動きになりました。
    重ねてお礼申し上げます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    jQueryで合計金額を計算したい

    前提・実現したいこと いつもお世話になっております。 現在、チェックボックスにチェックを入れたら各商品の個数を変更できるようにし、その商品の金額と個数を乗算したもをテキストフィ

  • 解決済

    JavaScript:チェックチェックで表示・非表示

    前提・実現したいこと JavaScriptでチェックボックスで表示・非表示を実現したいのですが、上手く行きません。 フォームで使用します。 デフォルトは非表示にしていて、チェッ

  • 受付中

    DataTablesで絞り込みを行いたい。

    DataTablesに対してプルダウン、チェックボックスで絞り込みを行いたい。 EX TABLE FILTER使えよって話ですが、表題通り、 DataTablesのテーブルに対して

  • 解決済

    javascript で table の行を絞り込み表示

    セレクトボックスとチェックボックスを使って、tableの行を絞り込み表示させたいです。 (javascript初心者なのでオープンソースを書き換えて使用しています。) 最初はt

  • 解決済

    JS セレクトボタンを元に計算

    以前の質問の追加で質問です。 キャンペーンというチェックボックスを追加したいです。 このボックスをクリックされるとフルーツの代金を計算に含まないように設定したいです。 <f

  • 解決済

    javascriptでテーブル内の表計算を行いたいです。

     前提・実現したいこと javascriptについての質問です。 テーブル内の表計算を繰り返し処理や配列などを用いて簡潔に記述したいです。 テーブル1の処理は 単価(手入力)→ラジ

  • 解決済

    JavaScriptで入力用サブウィンドウ作成

     前提・実現したいこと 「visual basic」などでのプログラミングは慣れているのですが、 「JavaScript」の初心者です。 大変恐縮ですが、JavaScriptで

  • 解決済

    jQueryでformの値を取得したい

    サイトに絞り込みとソート機能を実装しようと考えています。 具体的には、 checkboxにチェックが入っているものを表示し、 複数ある場合は値が大きい方を上に表示する感じになり

同じタグがついた質問を見る

  • JavaScript

    16440questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。