← 動的パーツギャラリーへ戻る

パーツ番号 10-07-05 ・ JavaScript使用

複数人予約人数セレクター

大人/子供の人数をボタンで増減させると合計金額が連動更新される。ツアーや飲食店の人数指定予約フォームに使える。

jsinput

プレビュー

ソースコード

HTML

<div class="d10-07-05-wrap">
          <div class="d10-07-05-row">
            <div class="d10-07-05-info"><strong>大人</strong><span>13歳以上</span></div>
            <div class="d10-07-05-ctrl">
              <button type="button" class="d10-07-05-minus" data-target="adult">−</button>
              <span class="d10-07-05-count" data-role="adult">2</span>
              <button type="button" class="d10-07-05-plus" data-target="adult">+</button>
            </div>
          </div>
          <div class="d10-07-05-row">
            <div class="d10-07-05-info"><strong>子供</strong><span>4〜12歳</span></div>
            <div class="d10-07-05-ctrl">
              <button type="button" class="d10-07-05-minus" data-target="child">−</button>
              <span class="d10-07-05-count" data-role="child">0</span>
              <button type="button" class="d10-07-05-plus" data-target="child">+</button>
            </div>
          </div>
          <div class="d10-07-05-total">合計金額 <b class="d10-07-05-price">¥8,400</b></div>
        </div>

CSS

.d10-07-05-wrap{width:100%;max-width:260px;}
        .d10-07-05-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f0f0f0;}
        .d10-07-05-info{display:flex;flex-direction:column;font-size:12px;color:#333;}
        .d10-07-05-info span{font-size:10px;color:#999;}
        .d10-07-05-ctrl{display:flex;align-items:center;gap:8px;}
        .d10-07-05-ctrl button{width:24px;height:24px;border-radius:50%;border:1px solid #ccc;background:#fff;cursor:pointer;font-size:14px;line-height:1;color:#444;}
        .d10-07-05-ctrl button:hover{border-color:#2f6fed;color:#2f6fed;}
        .d10-07-05-count{width:18px;text-align:center;font-size:13px;font-weight:600;}
        .d10-07-05-total{margin-top:12px;font-size:12px;color:#555;display:flex;justify-content:space-between;}
        .d10-07-05-price{color:#e0562f;font-size:15px;}

JavaScript

(function(){
          var root = document.querySelector('.d10-07-05');
          var counts = { adult: 2, child: 0 };
          var priceMap = { adult: 4200, child: 2100 };
          var priceEl = root.querySelector('.d10-07-05-price');
          function render(){
            root.querySelector('[data-role="adult"]').textContent = counts.adult;
            root.querySelector('[data-role="child"]').textContent = counts.child;
            var total = counts.adult * priceMap.adult + counts.child * priceMap.child;
            priceEl.textContent = '¥' + total.toLocaleString();
          }
          root.querySelectorAll('.d10-07-05-plus').forEach(function(btn){
            btn.addEventListener('click', function(){
              var t = btn.getAttribute('data-target');
              if(counts[t] < 9) counts[t]++;
              render();
            });
          });
          root.querySelectorAll('.d10-07-05-minus').forEach(function(btn){
            btn.addEventListener('click', function(){
              var t = btn.getAttribute('data-target');
              var min = (t === 'adult') ? 1 : 0;
              if(counts[t] > min) counts[t]--;
              render();
            });
          });
        })();

クラス名 .d10-07-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。