選択に応じて不要な入力欄を非表示にする方法

アンケートフォームなどにはよく「ある項目を選択した場合にのみ入力して欲しい」という限定項目があります。標準で全部の入力欄を表示しておいても良いのですが、入力する必要のない項目は非表示にしておく方が、ユーザを惑わせずに済むでしょう。
そこで、ラジオボタンの選択状況に応じて、それに対応するテキスト入力欄を表示させたり非表示にしたりする方法をご紹介いたします。

動作サンプルは以下の通りです。

上記に表示されている3つのラジオボタンのうち、「その他」項目を選択するとテキスト入力フォームが表示されます。それ以外の選択肢を選択するとテキスト入力フォームは消えます。

※ここでは説明のために、初期状態では「何も選択していない状態」とし、その状態ではすべての入力フォームが見える状態になっています。
実際に使う際には、初期状態では「最小限の項目」だけを表示しておき、「入力が必要になった項目だけをその都度見せる」形の方が望ましいでしょう。

特定のidを割り振った要素に対して、表示と非表示を切り替えるJavaScriptの書き方

JavaScriptを使って特定の部分の表示・非表示を切り替えるのは簡単で、下記のように記述します。

document.getElementById('id名').style.display = "状態";

対象要素のstyle.displayプロパティの値を切り替えることで、その対象要素を動的に表示したり消したりできます。
上記のJavaScriptでは、

• 「id名」の部分には、表示・非表示を切り替えたい箇所のid名(＝id属性の値)を記述します。
• 「状態」の部分には、
  • 値に「none」を指定すると非表示になり、
  • 値を「block」や「inline」にすると表示されます。

  ※対象がブロックレベル要素なら「block」を、インライン要素なら「inline」を指定します。

上記は、対称の要素のスタイルをJavaScriptで切り替えています。
スタイルシート(CSS)では、「display: none;」で非表示に、「display: block;」でブロックレベル要素として表示、「display: inline;」でインライン要素として表示されますから。その値と同じ値をJavaScriptで代入することで、表示を動的に切り替えられます。

選択に応じて不要な入力欄を非表示にするHTML＋JavaScriptソース

上記の記述方法を使って、まずは表示・非表示を切り替えるJavaScript関数を作ります。

function checkradio( disp ) {
   document.getElementById('sample').style.display = disp;
}

上記では「checkradio」という名前の関数を作成しています。表示・非表示の選択は引数(disp)で与えるようにしています。ソース中の「sample」と書かれた箇所は、対象のid名に修正して下さい。(下記のサンプルHTMLをそのまま使う場合は修正不要ですが。)

そして、HTMLを以下のような感じで書きます。

<p>
   <label><input type="radio" name="rs" value="1" onclick="checkradio('none');" >選択肢1</label>
   <label><input type="radio" name="rs" value="2" onclick="checkradio('none');" >選択肢2</label>
   <label><input type="radio" name="rs" value="3" onclick="checkradio('inline');">その他</label>
   <span id="sample">( 具体的にどうぞ：<input type="text" name="othertext" value="" size="15"> )</span>
</p>

上記では、3つのラジオボタンと1つのテキスト入力フォームを作っています。

各ラジオボタンでは、onclick属性を使って先ほど作成した関数(JavaScript)を呼び出しています。引数に「'none'」を与えると非表示になり、「'block'」を与えると表示されます。
ですから、「その他」のラジオボタンのみ「'block'」を与え、他の2つには「'none'」を与えています。

このサンプルでは、テキスト入力フォームや文字列を含む外側の「span要素」の表示・非表示を切り替えています。この方が、入力欄と同時に横のラベル(文字列)の表示・非表示も切り替えられるので便利です。しかし、input要素そのものにid名を振ることで、テキスト入力欄そのものだけの表示・非表示を切り替えることもできます。フォームの内容に応じて使い分けて下さい。

(更新日：2017年06月10日)