スポンサーリンク

jQueryで計算シミュレーターを作る

jQuery
2017.11.20

※2017年11月30日に追記しました

少し前に仕事で作ったものですが、それなりに汎用性が高いので紹介させていただきます

クリエイターズシップさんの見積作成ページのように選択項目から選ぶと料金を計算して表示するといった感じです
単一選択と複数選択がある想定です

各種ファイル

JSファイル

radioprice = 0;
checkprice = 0;
$('.radio').click(function(){
  if($(this).closest('.radiocontainer').find('.checked').length > 0){
    radioprice = radioprice - $(this).closest('.radiocontainer').find('.checked').data('price');
    radioprice = radioprice + $(this).data('price');
    $(this).closest('.radiocontainer').find('.checked').toggleClass('checked');
    $(this).toggleClass('checked');
  } else {
    radioprice = radioprice + $(this).data('price');
    $(this).toggleClass('checked');
  }
  $('.result').html(radioprice + checkprice);
  $('.result').val(radioprice + checkprice);
})
$('.check').click(function(){
  if($(this).hasClass('checked')) {
    if(checkprice > 0) {
      checkprice = checkprice - $(this).data('price');
    }
  } else {
    checkprice = checkprice + $(this).data('price');
  }
  $(this).toggleClass('checked');
  $('.result').html(radioprice + checkprice);
  $('.result').val(radioprice + checkprice);
})

HTMLファイル

<section class="radiocontainer" >
    <p>ラジオボタン（単一選択）の場合</p>
    <div class="radio" data-price="10000">10000円</div>
    <div class="radio" data-price="20000">20000円</div>
    <div class="radio" data-price="30000">30000円</div>
</section>

<section class="checkcontainer" >
    <p>チェックボックス（複数選択）の場合</p>
    <a href="#" class="check" data-price="40000">40000円</a>
    <a href="#" class="check" data-price="50000">50000円</a>
    <a href="#" class="check" data-price="60000">60000円</a>
</section>

<section class="calc" >
    <p>計算結果の表示</p>
    <input type="text" class="result" name="result" size="30" disabled="disabled">
</section>

CSSファイル

/* チェック済みが分かるように赤枠つけるだけです */

.checked {
    outline: solid 1px #ff0000;
}

解説

簡単な概要

HTMLでボタンとなるタグ（なんでもいいです）にdata属性で「price」を持たせてそれを元に計算します
「data-price=”10000″」とかの部分ですね

単一選択の設定（HTML）

  • コンテナに「.radiocontainer」を設定します
  • ボタンとなるタグには「.radio」を設定します

複数選択の設定（HTML）

  • コンテナに「.checkcontainer」を設定します
  • ボタンとなるタグには「.check」を設定します

計算結果表示の設定（HTML）

  • コンテナに「.calc」を設定します
  • 表示するタグには「.result」を設定します

JS解説

radioprice = 0;
checkprice = 0;

まず計算用の変数を作成しておきます、なんとなく単一と複数で分けました

$('.radio').click(function(){
  if($(this).closest('.radiocontainer').find('.checked').length > 0){
    radioprice = radioprice - $(this).closest('.radiocontainer').find('.checked').data('price');
    radioprice = radioprice + $(this).data('price');
    $(this).closest('.radiocontainer').find('.checked').toggleClass('checked');
    $(this).toggleClass('checked');
  } else {
    radioprice = radioprice + $(this).data('price');
    $(this).toggleClass('checked');
  }
  $('.result').html(radioprice + checkprice);
  $('.result').val(radioprice + checkprice);
})

単一選択のタグがクリックされた際の部分です
まずクリックされた時に兄弟要素にチェックされている項目がないかどうかの判定をするのですが、Bootstrapを使っていると兄弟要素にボタンがいることは稀なんじゃないかなと思います
そこでコンテナになっている「.radiocontainer」の出番です

if($(this).closest('.radiocontainer').find('.checked').length > 0){}

closest([expr])

jQuery 1.3より。

開始要素から最も近い親要素を選択します。引数にセレクター書式を指定した場合、マッチする最も近い親要素を返します。
フィルタにマッチすれば、開始要素そのものが返る場合もあります。
ルートドキュメントまで辿ってもマッチする要素が無い場合、戻り値はnoneになります。

closestは、特にイベント操作で便利です。

※jQuery日本語リファレンスより引用

.closest('.radiocontainer')

で１度コンテナまで戻ります、その後

.find('.checked').length > 0

で兄弟要素に「.checked」が無いかどうかを探しに行きます
これだと例えば

<div class="row radiocontainer">
    <div class="col-md-4 col-sm-6">
        <div class="radio next-btn" data-price="10000">10000円</div>
    </div>

    <div class="col-md-4 col-sm-6">
        <div class="radio next-btn" data-price="20000">20000円</div>
    </div>

    <div class="col-md-4 col-sm-6">
        <div class="radio next-btn" data-price="30000">30000円</div>
    </div>
</div>

とかなっても大丈夫です
あとはチェックされていれば

radioprice = radioprice - $(this).closest('.radiocontainer').find('.checked').data('price');
radioprice = radioprice + $(this).data('price');

で再計算し、最初のチェックなら

radioprice = radioprice + $(this).data('price');
$(this).toggleClass('checked');

単純に足し算して「.checked」を設定して終わりです

複数選択の処理はもっと簡単で

$('.check').click(function(){
  if($(this).hasClass('checked')) {
    if(checkprice > 0) {
      checkprice = checkprice - $(this).data('price');
    }
  } else {
    checkprice = checkprice + $(this).data('price');
  }
  $(this).toggleClass('checked');
  $('.result').html(radioprice + checkprice);
  $('.result').val(radioprice + checkprice);
})

「.checked」が付いているものをクリックしたら引き算、付いていなければ足し算します

$(this).toggleClass('checked');

でチェックの処理をして完了です

双方どちらの処理でも

$('.result').html(radioprice + checkprice);
$('.result').val(radioprice + checkprice);

で「.result」に計算結果を表示します
表示するタグがdivとかだったら「.html」だけで、テキストボックスなら「.val」だけで大丈夫です

まとめ

長々書きましたけど処理自体は単純なものです
そのまま使ってもいいですしカスタマイズもしやすいんじゃないかなと思います

計算シミュレーター作る機会もそんなに無いと思いますがご参考まで∠( ﾟдﾟ)／

追記

2017年11月30日
これだけだとスマホやタブレット環境のタップに反応しないので、こちらのサイトを参考に少し修正しました

var _click = (window.ontouchstart === undefined)? 'click' : 'touchstart';
radioprice = 0;
checkprice = 0;
$('.radio').on(_click, function() {
  if($(this).closest('.radiocontainer').find('.checked').length > 0){
    radioprice = radioprice - $(this).closest('.radiocontainer').find('.checked').data('price');
    radioprice = radioprice + $(this).data('price');
    $(this).closest('.radiocontainer').find('.checked').toggleClass('checked');
    $(this).toggleClass('checked');
  } else {
    radioprice = radioprice + $(this).data('price');
    $(this).toggleClass('checked');
  }
  $('.result').html(radioprice + checkprice);
  $('.result').val(radioprice + checkprice);
})
$('.check').on(_click, function() {
  if($(this).hasClass('checked')) {
    if(checkprice > 0) {
      checkprice = checkprice - $(this).data('price');
    }
  } else {
    checkprice = checkprice + $(this).data('price');
  }
  $(this).toggleClass('checked');
  $('.result').html(radioprice + checkprice);
  $('.result').val(radioprice + checkprice);
})
スポンサーリンク

コメント

  1. 匿名希望 より:
    2019年5月24日 14:34

    「クリエイターズシップさんの見積作成ページ」のリンク先が
    中国のサイトに飛ぶようになってしまっているようです。

    返信
タイトルとURLをコピーしました