ラジオボタンのチェック内容で他の入力欄の表示内容を変更する方法

2025-11-05

フォームの入力で、条件に合わせて表示内容を変更したいときなどがあると思います。

ラジオボタンなどのチェック状況によって、フォームの表示を差し替える方法などをざっくりとメモしておこうと思います。

と、言うわけでざっくりと書いたHTMLとCSSとJavascriptをそれぞれ下に置きました。

html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <title>front-page.php</title>
  <link rel="stylesheet" href="./css/head.min.css">
  <link rel="stylesheet" href="./css/test.min.css">
</head>
<body>
  <h1>連絡方法</h1>
  <label>
    <input type="radio" name="連絡方法" value="電話連絡" id="telSet" checked>電話連絡
  </label>
  <label>
    <input type="radio" name="連絡方法" value="メール連絡" id="mailSet">メール連絡
  </label>

  <h1>連絡可能時間</h1>
  <select name="連絡可能時間" id="rtime">
    <option selected value="" class="tellist tel">連絡可能な時間を選択してください</option>
    <option value="9時～10時" class="tel">9時～10時</option>
    <option value="10時～11時" class="tel">10時～11時</option>
    <option value="11時～12時" class="tel">11時～12時</option>
    <option value="12時～13時" class="tel">12時～13時</option>
    <option value="13時～14時" class="tel">13時～14時</option>
    <option value="14時～15時" class="tel">14時～15時</option>
    <option value="16時～17時" class="tel">16時～17時</option>
    <option value="17時～18時" class="tel">17時～18時</option>
    <option value="メール対応" class="mail">メールにて連絡</option>
  </select>
  <div class="mail">
    メールでご連絡の方はこちらに記入してください
    <textarea name="連絡欄" class="mail"></textarea>
  </div>
</body>
</html>

css

.mail {
  display: none;
}

javascript

document.addEventListener('DOMContentLoaded', () => {
  const telSet = document.querySelector('#telSet');
  const mailSet = document.querySelector('#mailSet');
  const rtimeSelect = document.querySelector('#rtime');
  const telOptions = document.querySelectorAll('.tel');
  const mailOptions = document.querySelectorAll('.mail');

  function updateContactOptions() {
    // 「メール連絡」がチェックされている場合
    if (mailSet.checked) {
      telOptions.forEach(option => {
        option.style.display = 'none';
      });
      mailOptions.forEach(option => {
        option.style.display = 'block';
      });
      rtimeSelect.value = "メール対応";

    } 
    // 「電話連絡」がチェックされている場合
    else {
      mailOptions.forEach(option => {
        option.style.display = 'none';
      });
      telOptions.forEach(option => {
        option.style.display = 'block';
      });
      rtimeSelect.value = "";
    }
  }
  // ラジオボタンの選択が変わったら、関数を実行
  telSet.addEventListener('change', updateContactOptions);
  mailSet.addEventListener('change', updateContactOptions);

  // ページ読み込み時にも一度実行して、正しい状態にする
  updateContactOptions();
});

ちょっと力技ですが、ラジオボタンの選択内容によって、他の部分の表示、非表示を変えることで
必要なものだけ見せることが出来るようになります。

この方法は簡単に取り入れられるのですが、バリデーションを設置した時に動作テストをしっかりしておきましょう。
（入力必須の内容が非表示になるとフォーム入力が終了しなくなるなどのトラブルが発生する等…）

フォーム入力は場合により入力項目が多くなることがあります。その場合入力を小分けにしたり、必要なものだけ表示をさせるようにすることで若干入力の改善ができるようになります。

と、言うわけで今回はこんな感じです。

もしも、ホームページ制作でお困りでしたらパタパタワークスがあなたの力になれるかもしれません。ちょっとしたことでもお気軽にお問い合わせください。それではまた！