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

Question

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の初心者で、他の人が作ったのを変更しています。
大変恐縮ですが、ご教授のほどよろしくおねがいします。

Comments

[kei344]

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

[ziyuu]

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

Answer 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/

Comments

[ziyuu]

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

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

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

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

[euledge]

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

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

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

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

[ziyuu]

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

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