東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

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

2019.09.20 Posted by

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

細かい制御内容としては

 

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

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

 

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

 

■HTML

 

■Javascript

 

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

 

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

 

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

 

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

 

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

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278