【jQuery】数字入力をアップダウンボタンで複数制御

tecmemo1909
こんにちは、ウェブラボクリエイターズメモです。

 

ここ最近、数字入力をアップダウンボタンで複数制御する機会があったので備忘録として残しておきたいと思います。

 

具体的な例を挙げてみると、ECサイトなどで商品の選択画面で

 

  • 商品の種類は複数選択可
  • 商品を全種類あわせて5個まで選択可能
  • 個数をアップダウンボタンで制御

といったものを想定しています。

 

これだけではイメージが湧きづらいと思うので、まずはDEMOをご覧ください。

 

→【jQuery】数字入力をアップダウンボタンで複数制御のDEMO

 

なんとなくイメージできたでしょうか?

 

細かい制御内容としては

 

  • 個別の商品の数が0以下にはならないように
  • 商品が種類あわせて6以上にならないように

といった処理をしています。

 

ソースは以下のように書いてみました。

 

■HTML

 

■Javascript

 

Javascriptはロード時、ダウンボタンを押したとき、アップボタンを押したときの3パターンの処理を書いています。
もっとキレイに書けると思いますが許してください。。。

 

作ってみた感想としてはもっと簡単に書けると思っていたのですが意外と面倒でしたね、結構長くなってしまいました。ポイントとしてはinputの値をやり取りする時はちゃんと数値データとして扱うことです。

 

→【jQuery】数字入力をアップダウンボタンで複数制御のDEMO

 

少しでも誰かの参考になれば幸いです。

 

以上、クリエイターズメモでした。

  • このページを共有する