【JavaScript】ラジオボタンで分岐するフォームを作成する方法

ウェブフォームは、ユーザーが情報を入力する主要な手段の一つです。しかし、すべての情報が常に必要なわけではありません。場合によっては、ユーザーが選択したオプションに応じて、表示する入力フィールドを動的に変更したいこともあるでしょう。この記事では、JavaScriptを使用して、ラジオボタンの選択に応じて表示する入力フィールドを切り替える方法を解説します。

スポンサーリンク

HTMLでの基本構造

まずは、HTMLで基本的なフォームの構造を作成します。この例では、2つのラジオボタン（オプション1とオプション2）と、それぞれに対応するテキストフィールド（フィールド1とフィールド2）を用意します。

<!DOCTYPE html>
<html>
<head>
  <title>ラジオボタンで分岐するフォーム</title>
</head>
<body>

  <form id="myForm">
    <label>
      <input type="radio" name="choice" value="option1"> オプション1
    </label>
    <label>
      <input type="radio" name="choice" value="option2"> オプション2
    </label>

    <div id="option1Fields" style="display:none;">
      <label for="field1">フィールド1: </label>
      <input type="text" id="field1">
    </div>

    <div id="option2Fields" style="display:none;">
      <label for="field2">フィールド2: </label>
      <input type="text" id="field2">
    </div>

    <input type="submit" value="送信">
  </form>

</body>
</html>

JavaScriptでの動的処理

次に、JavaScriptを使ってラジオボタンが選択されたときに表示する入力フィールドを切り替えます。

document.addEventListener("DOMContentLoaded", function() {
  const form = document.getElementById("myForm");
  const radios = form.querySelectorAll('input[type="radio"]');
  const option1Fields = document.getElementById("option1Fields");
  const option2Fields = document.getElementById("option2Fields");

  radios.forEach(function(radio) {
    radio.addEventListener("change", function() {
      if (this.value === "option1") {
        option1Fields.style.display = "block";
        option2Fields.style.display = "none";
      } else if (this.value === "option2") {
        option1Fields.style.display = "none";
        option2Fields.style.display = "block";
      }
    });
  });
});

このスクリプトは、DOMContentLoadedイベントが発火した後に実行されます。これにより、HTMLが完全に読み込まれた後でないとスクリプトが実行されないことを防ぎます。

よくある質問（FAQ）

Q. ラジオボタンの選択値をJavaScriptで取得するには？
A. querySelectorAll(“input[type=radio][name=group]:checked”)でチェックされたラジオを取得し、.valueで値を取り出します。document.querySelector()なら直接:checkedセレクタで取れます。
Q. ラジオボタンの選択に応じてフォームの項目を切り替えるには？
A. changeイベントを監視し、選択値に応じて表示・非表示の切り替えをします。関連セクションにdata-show属性などを使うとコードがすっきりします。
Q. ラジオボタンをJavaScriptで初期選択状態にするには？
A. 対象のinput要素のcheckedプロパティをtrueに設定します。例：document.querySelector(“[value=option1]”).checked = true。DOMContentLoadedイベント内で実行してください。

まとめ

この記事では、JavaScriptを使用してラジオボタンの選択に応じて入力フィールドを動的に切り替える方法を解説しました。このテクニックは、ユーザーによる選択に応じて必要な入力項目が変わるような場合に非常に有用です。コードはシンプルでありながら、ユーザーエクスペリエンスを大いに向上させることができます。