【コピペOK】合計金額シミュレーターの作り方｜チェックボックス・ラジオボタン・セレクトボックス対応（jQuery版・JavaScript版）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>料金シミュレーター</title>
<style>
.sim { max-width: 560px; margin: 40px auto; padding: 0 16px; font-family: sans-serif; }
.sim fieldset { border: 0; padding: 0; margin: 0 0 24px; }
.sim legend { width: 100%; padding-bottom: 6px; margin-bottom: 10px; border-bottom: 1px solid #333; font-weight: bold; }
.sim label { display: inline-flex; align-items: center; gap: 6px; margin: 0 16px 8px 0; cursor: pointer; }
.sim label:has(input:checked) { font-weight: bold; }
.sim select { width: 100%; padding: 10px; font-size: 1rem; }
.sim__total { font-size: 1.5rem; font-weight: bold; }
</style>
</head>
<body>
<form class="sim" id="simulator">
  <fieldset>
    <legend>ログの形</legend>
    <label><input type="radio" name="log" value="丸ログ" data-price="1000" checked> 丸ログ ¥1,000</label>
    <label><input type="radio" name="log" value="角ログ" data-price="2000"> 角ログ ¥2,000</label>
  </fieldset>

  <fieldset>
    <legend>ストーブ</legend>
    <label><input type="radio" name="stove" value="電気ストーブ" data-price="10000"> 電気ストーブ ¥10,000</label>
    <label><input type="radio" name="stove" value="薪ストーブ" data-price="20000"> 薪ストーブ ¥20,000</label>
  </fieldset>

  <fieldset>
    <legend>オプション（複数選べます）</legend>
    <label><input type="checkbox" name="option" value="照明" data-price="5000"> 照明 ¥5,000</label>
    <label><input type="checkbox" name="option" value="外壁塗装" data-price="50000"> 外壁塗装 ¥50,000</label>
    <label><input type="checkbox" name="option" value="ベンチ" data-price="30000"> ベンチ ¥30,000</label>
  </fieldset>

  <fieldset>
    <legend>運搬費</legend>
    <select name="transport">
      <option value="" data-price="0">地域をお選びください</option>
      <option value="地域1" data-price="2000">地域1 ¥2,000</option>
      <option value="地域2" data-price="3000">地域2 ¥3,000</option>
      <option value="地域3" data-price="4000">地域3 ¥4,000</option>
    </select>
  </fieldset>

  <p class="sim__total">合計 <output id="total">0</output> 円</p>
  <button type="reset">リセット</button>
</form>

<script>
const form = document.getElementById('simulator');
const totalEl = document.getElementById('total');

function calcTotal() {
  let total = 0;

  // チェックが入っているラジオボタンとチェックボックス
  form.querySelectorAll('input:checked').forEach((input) => {
    total += Number(input.dataset.price) || 0;
  });

  // セレクトボックスで選ばれている項目
  form.querySelectorAll('select').forEach((select) => {
    total += Number(select.selectedOptions[0].dataset.price) || 0;
  });

  totalEl.textContent = total.toLocaleString('ja-JP');
}

// どの部品が変わっても、フォーム全体で受け取って計算し直す
form.addEventListener('change', calcTotal);

// reset イベントは値が戻る「前」に発生するので、戻ったあとに計算する
form.addEventListener('reset', () => {
  setTimeout(calcTotal);
});

calcTotal();
</script>
</body>
</html>

jQuery(function ($) {
  const $form = $('#simulator');

  function calcTotal() {
    let total = 0;

    // チェックが入っている input と、選ばれている option
    $form.find('input:checked, option:selected').each(function () {
      total += Number($(this).data('price')) || 0;
    });

    $('#total').text(total.toLocaleString('ja-JP'));
  }

  $form.on('change', calcTotal);
  $form.on('reset', function () {
    setTimeout(calcTotal);
  });

  calcTotal();
});

<fieldset>
  <legend>人数</legend>
  <label><input type="number" name="people" value="1" min="1" max="20" data-price="3000"> 人（1人 ¥3,000）</label>
</fieldset>

// 数量 × 単価
form.querySelectorAll('input[type="number"]').forEach((input) => {
  total += (Number(input.dataset.price) || 0) * (Number(input.value) || 0);
});

form.addEventListener('input', calcTotal);

const taxIncluded = Math.floor(total * 1.1); // 切り捨て
totalEl.textContent = taxIncluded.toLocaleString('ja-JP');

document.getElementById('total-price').value = total;