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

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

さて、今回紹介するのは、JavaScriptを使ってラジオボタンのチェックの有無でコンテンツの表示非表示を切り替える、というものです。

実際の動きを見た方がわかりやすいと思うので、まずはデモをご覧ください。

DEMOはこちら

チェックを切り替えるごとに表示されるコンテンツも切り替わっているのがわかると思います。

フォームの項目は多くなってしまうと、ユーザーはストレスを感じてしまいます。
そんな時、チェックした項目によってその後の内容を変化させれば、よりユーザビリティに優れたフォームになります。

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

ではこの技術をどのようにして実装しているのか説明します。

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

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

name属性がentryplanのラジオボタンで、1つ目のラジオボタンにチェックが入るとAを実行、2つ目ならBを実行するというもので、

表示、非表示はid(firstbox、second box)をcssのdisplayで切り替えています。

いかがでしたでしょうか?

今回はラジオボタンで作成しましたが、セレクトボックスで選択させる事も可能ですので、フォームの項目が多すぎて困っている時にはこうした技術を使うのも良いですね。
  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。