にしし ふぁくとりー:西村文宏 個人サイト

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

選択に応じて不要な入力欄を非表示にする方法 [入力フォーム]

フォーム内に「ある項目を選択している場合に限って入力して欲しい」という限定項目がある場合は、ユーザの選択状況に応じて入力欄の表示・非表示が切り替わる方が便利です。JavaScriptを使えば、例えばラジオボタンなどの選択状態に応じて、特定のテキスト入力欄を表示したり消したりできます。

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

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

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



( 具体的にどうぞ: )

上記に表示されている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関数を作ります。

JavaScriptソース

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

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

そして、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名を振ることで、テキスト入力欄そのものだけの表示・非表示を切り替えることもできます。フォームの内容に応じて使い分けて下さい。

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---