【jQuery】カートっぽいフォーム

カートっぽいフォームを作りました。(実際には送信されません)
選択した個数と、合計金額をリアルタイムで計算します。

See the Pen
190523_カート計算 by nekuta (@nekuta)
on CodePen.

最初にページが読まれたら

アイテム金額とcheckboxのチェック有無を配列に格納する

最初に全てのアイテムの金額とcheckboxがチェックされているかどうかを調べて全て配列に入れます。
この時.priceの中身は<div class=”price”>150円</div>のような感じになっているので(最後に足し算するので)数字だけを抜き出し、数値に変換して格納します。

  
    let $total = $('#total>span');
      let $priceChg = $('#price-chg');
      let $itemCalcLi = $('.item-calc > li');
      let selectItemArray = []; //金額とcheckの有無を格納する　

// ~~~~~ 中略 ~~~~~

     //最初にに金額とcheckの有無を格納する
      function createItemCheckArray() {
        for (let a = 0; a < $itemCalcLi.length; a++) {
          let itemCalcLiPrice = $itemCalcLi.eq(a).find('.price').text();
          itemCalcLiPrice = itemCalcLiPrice.replace(/[^0-9]/g, ''); //数字だけ抜き出す
          itemCalcLiPrice = Number(itemCalcLiPrice); //数値に変換

          //選ばれているかどうか 選ばれているならtrue
          let itemRSelected;
          let watchCheckbox = $itemCalcLi.eq(a).find('input[type="checkbox"]');
          if (watchCheckbox.prop('checked')) {
            itemRSelected = true;
          } else {
            itemRSelected = false;
          }
          selectItemArray.push([itemCalcLiPrice, itemRSelected]);//金額とcheckの有無を格納
        };
      };

金額と個数を出力する

selectItemArrayに格納したものを見て、selectItemArrayの[b][1]がtrueのもの(チェックされているもの)を変数priceにどんどん足していく。
最後に1,000のような感じにカンマ区切りにして出力。

   
   //金額と個数を計算、出力
      function priceTxtChange() {
        let price = 0; //金額
        let priceNum = 0; //個数

        for (let b = 0; b < selectItemArray.length; b++) {
          if (selectItemArray[b][1] === true) {//selectItemArray[b][1]の値がtrueのものだけを計算する
            price = price + selectItemArray[b][0];
            priceNum++;
          }
        }
        price = String(price).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,'); //カンマ区切りにする
        $priceChg.text(price);
        $total.text(priceNum + '商品');
      }

チェックボックスが動いたら

$itemCalcLiが押された時

クリックしたチェックボックスがチェックされているかどうかを調べて関数changeItemCheckArrayを呼ぶ。
changeItemCheckArrayでselectItemArrayの配列を書き換えた後、関数priceTxtChangeを呼び出し計算します。


   let $itemCalcLi = $('.item-calc > li');

//~~~~~ 中略 ~~~~~

   //クリックされた時に値を変える
      function changeItemCheckArray(index, thisCheckToggle) {
        if (thisCheckToggle) {
          // チェックボックスがチェックされているならselectItemArray[index][1]をtrueに、違うならfalseに書き換える
          selectItemArray[index][1] = true;
        } else {
          selectItemArray[index][1] = false;
        }
        return priceTxtChange();//priceTxtChangeを呼びだし計算
      };
     
     //$itemCalcLiクリックした時
      $itemCalcLi.on('click', function () {
        var index = $('.item-calc >li').index(this);
        let thisCheckToggle;
        let thisCheckbox = $(this).find('input[type="checkbox"]');

        if (thisCheckbox.prop('checked')) {//チェックボックスがチェックされているならtrue、違うならfalse
          thisCheckToggle = true;
        } else {
          thisCheckToggle = false;
        }
        return changeItemCheckArray(index, thisCheckToggle); //関数 changeItemCheckArrayを呼ぶ
      });