WEBサイト制作

ショッピングサイト制作

システム開発

コンテンツ制作

TORATについて

制作の流れ

プライバシーポリシー

お問い合わせは
こちらから

TOP

【コピペOK】ラジオボタンのクリックでフォームの表示・非表示の切り替えを簡単に実装

2020年05月01日

投稿者: ヨッシー

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サイトのラジオボタンの選択によってフォームの表示・非表示の切り替えをカンタンに切り替えることができます。

是非お試しあれ♪

この記事の投稿者

フロントエンドエンジニア

ヨッシー

プロフィール情報

WordPressの「メディアの追加」トラブル時の対処

2015年9月6日 TORAT

ie6用透過png対応策

2012年2月24日 TORAT

2019年12月12日 アンディ

2020年5月7日 アンディ

ブログ一覧へ

書いた人

WRITERS