TORAT
JavaScriptを使ってフォーム項目の表示/非表示を切り替えるのは慣れるまで大変ですよね。そんな方のために5つのサンプル集を作成しました♪
サンプル①
下のサンプルは、好きな音楽のジャンルをクリックすると音楽のジャンルが表示され、項目をクリックすると説明が表示されます。
See the Pen
ZEbJGwJ by ヨッシー (@yoshida123)
on CodePen.
サンプル②
下のサンプルは、クリックするとリストに表示される内容が変わります。
See the Pen
vYNJNoy by ヨッシー (@yoshida123)
on CodePen.
サンプル③
サンプル②に追加機能を付けました。
クリックするとリストに表示される内容が変わります。ここまでは一緒です。
なんと、「☑ チェックリスト」として選択ができるようになります。
See the Pen
abvydMB by ヨッシー (@yoshida123)
on CodePen.
サンプル④
サンプル③に追加機能を付けました。
クリックするとリストに表示される内容が変わりチェックリストとして選択ができるようになります。ここまでは一緒です。
「好きな食べ物」の中の項目を選んだあと、「好きな場所」の項目に移り、再び「好きな食べ物」に戻ると「好きな食べ物」のチェックボックスがクリアされます。すごい便利ですね♪
See the Pen
abvyNzW by ヨッシー (@yoshida123)
on CodePen.
ラスト
最後はアンケートなどに使える入力欄を表示させたものです。
See the Pen
wvKqzoj by ヨッシー (@yoshida123)
on CodePen.
JavaScriptを使うとWebサイトのラジオボタンの選択によってフォームの表示・非表示の切り替えをカンタンに切り替えることができます。
是非お試しあれ♪
