Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:48.

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

アンケートフォームなどでは、「ある項目を選択した場合にのみ入力して欲しい」項目があったりします。標準で全部の入力欄を表示しておいても良いのですが、入力する必要のない項目は非表示にしておく方が、ユーザを惑わせずに済むかも知れません。
そこで、ラジオボタンを使った選択に応じて、入力欄を表示させたり非表示にしたりする方法を書いてみます。
サンプルは以下の通り。

具体的にどうぞ:

上記に表示されている3つのラジオボタンのうち、「その他」を選択するとテキスト入力フォームが表示されます。それ以外の選択肢を選択するとテキスト入力フォームは消えます。
(※最初の何も選択していない状態では、テキスト入力フォームは表示されています。)

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

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

上記の「ID名」の部分に、表示・非表示を切り替えたい箇所のID名(id属性の値)を記述します。「状態」の部分に「none」を指定すると非表示になり、「block」や「inline」などを指定すると表示されます。
(※対象がブロックレベル要素なら「block」を、インライン要素なら「inline」を指定します。)

これを使って、表示・非表示を切り替えるJavaScript関数を作ります。例えば以下のように。

<script type="text/javascript"><!--
   function checkradio( disp ) {
      document.getElementById('sample').style.display = disp;
   }
// --></script>

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

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

<form action="xxx">
   <p>
      <input type="radio" name="rs" id="r1" value="1" onclick="checkradio('none');" /><label for="r1">選択肢1</label>
      <input type="radio" name="rs" id="r2" value="2" onclick="checkradio('none');" /><label for="r2">選択肢2</label>
      <input type="radio" name="rs" id="r3" value="3" onclick="checkradio('block');" /><label for="r3">その他</label>
   </p>
   <p id="sample">
      具体的にどうぞ:<input type="text" name="othertext" value="" size="15" />
   </p>
</form>

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

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

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど