JavaScriptを使って、選択された要素の表示/非表示を切り替える

2014.05.26　Posted by Coding_team

Webプログラミング

今月からウェブラボ技術メモが復活します！
新しい技術や、有用な情報をお伝えしていきたいと思いますので、宜しくお願いいたします。

さて、今回紹介するのは、JavaScriptを使ってラジオボタンのチェックの有無でコンテンツの表示非表示を切り替える、というものです。
実際の動きを見た方がわかりやすいと思うので、まずはデモをご覧ください。

チェックを切り替えるごとに表示されるコンテンツも切り替わっているのがわかると思います。
フォームの項目は多くなってしまうと、ユーザーはストレスを感じてしまいます。
そんな時、チェックした項目によってその後の内容を変化させれば、よりユーザビリティに優れたフォームになります。

例えば、「初めての方」と「2回目以降の利用」で入力項目が違う場合は「初めての方」にチェックを入れると名前や住所などの入力欄を表示させ、「2回目以降の利用」にチェックを入れた場合は会員番号などを入力させると良いですね。

ではこの技術をどのようにして実装しているのか説明します。
今回は最近よく使われているライブラリ「jQuery」を使用していませんので、別途jQueryを読み込ませる必要はありません！
数行のJavaScriptだけで実装が可能です！

まずはHTMLのサンプルコードをご覧ください。

<div class="mb20">
    <input type="radio" name="entry" onclick="entryChange1();" checked="checked" /> 登録済みの情報を選択する
    <input type="radio" name="entry" onclick="entryChange1();" /> 新たに情報を入力する
</div>

<div>
    <table>
    <tr id="firstbox">
    <th>名前：</th>
    <td>山田 太郎</td>
    </tr>

    <tr id="secondbox">
    <th>名前：</th>
    <td><input type="text" name="" placeholder="(例：山田 太郎)" class="w94" /></td>
    </tr>
    </table>
</div>
</pre class="lang:default decode:true">

今回はtableを使用しましたが、特にtableである必要はありません。
重要なのは1点、inputタグに「onclick="関数名"」をつけるだけです。
サンプルではentryChange1としますが、任意の関数名をつけて構いません。
（関数名を変更した場合はScript側の変更も必要です。）

次にJavaScriptのコードです。

<pre class="lang:default decode:true">
function entryChange1(){
	radio = document.getElementsByName('entry')
	if(radio[0].checked) {
		//A.1つ目が選択されたら下記を実行
		document.getElementById('firstbox').style.display = "";
		document.getElementById('secondbox').style.display = "none";
	}else if(radio[1].checked) {
		//B.2つ目が選択されたら下記を実行
		document.getElementById('firstbox').style.display = "none";
		document.getElementById('secondbox').style.display = "";
	}
}
window.onload = entryChange1;