ウェブフォームは、ユーザーが情報を入力する主要な手段の一つです。しかし、すべての情報が常に必要なわけではありません。場合によっては、ユーザーが選択したオプションに応じて、表示する入力フィールドを動的に変更したいこともあるでしょう。この記事では、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が完全に読み込まれた後でないとスクリプトが実行されないことを防ぎます。
まとめ
この記事では、JavaScriptを使用してラジオボタンの選択に応じて入力フィールドを動的に切り替える方法を解説しました。このテクニックは、ユーザーによる選択に応じて必要な入力項目が変わるような場合に非常に有用です。コードはシンプルでありながら、ユーザーエクスペリエンスを大いに向上させることができます。
