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

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

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

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

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

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

金額と個数を出力する

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

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

$itemCalcLiが押された時

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

Comment

入力エリアすべてが必須項目です。
メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

*

*

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

  • コーダーのための計算機