ひげめがねプログラム

初心者プログラマーの覚書となんかいろいろ

チェック入れたものだけ計算したいんです先生!しかも金額も変更可能です!

f:id:pstar:20170830221754j:plain
「よろしい。ならばjavascriptだ。」
「はい。」
っつってググってググってググりまくったけどわかんなくてしばらくはまってた処理。

商品 金額

























↑チェックいれたものだけ計算。金額変更してチェック入ってたら計算。
たったこれだけの処理なのにね。

HTML

<table>
<tr>
<th style="background-color:gray;">商品</th>
<th style="background-color:gray;">金額</th>
<th style="background-color:gray;"></th>
</tr>
<tr>
<td><label for="glasses">めがね</label></td>
<td><input placeholder="金額" class="price" id="glassesPrice" name="glassesPrice" type="text" value="400"></td>
<td><input class="check" data-price="glassesPrice" id="" name="checkGlasses" type="checkbox">
</td>
</tr>
<tr>
<td><label for="mustache">ひげ</label></td>
<td><input placeholder="金額" class="price" id="mustachePrice" name="mustachePrice" type="text" value="300"></td>
<td><input class="check" data-price="mustachePrice" id="" name="checkMustache" type="checkbox"></td>
</tr>
<tr>
<td><label for="kGlasses">めがね(かにゃめモデル)</label</td>
<td><input placeholder="金額" class="price" id="kGlassesPrice" name="kGlassesPrice" type="text" value="900"></td>
<td><input class="check" data-price="kGlassesPrice" id="" name="checkKGlassesPrice" type="checkbox" ></td>
</tr>
<tr>
<td><label for="priceTotal">合計</label></td>
<td><input placeholder="合計金額" id="priceTotal" name="priceTotal" type="text"></td>
<td></td>
</tr>
</table>

金額入力フィールドとチェックボックスをどうやって結び付けたらいいのかわからなくて結局チェックボックスのdata-priceに金額idと同じものを設定してattrで呼び出すことに。

JavaScript & JQuery

$(function(){
//チェックボックスのチェンジイベント
 $(document).on('change', 'input[class = "check"]' ,function(){
    calcPrice();
 });

//金額フィールドのフォーカスアウト
$('.price').focusout(function(){
    calcPrice();
});

//金額合計のためのfunction
function calcPrice(){
  var price = [];
  //チェックされたものだけ回す
  $('input[class = "check"]:checked').each(function(){
 //数値型に変換して変数に代入するよ
  var number = parseInt($("#" + $(this).attr('data-price')).val());
  //配列に入れる                
  price.push(number);

  });
  var price_total = 0;
 //for文で配列を回して合計を出す
  for(var i = 0, len = price.length;i < len; i++){
  price_total += price[i];
  }
  $("#priceTotal").val(price_total +"円");
 }
});

ほんとは計算前に数字かどうかの確認とかカンマ入れたりのけたりする処理がはいったりしますが割愛します。
そんなこんなで〇時間かかってようやくできたのでした。乙!