【jQuery】フォームの条件分岐（conditional logic）にはdependsOn！

先日、フォームの条件分岐（conditional logic）にjQueryプラグイン「dependent.fields.js」を紹介したのですが、使いすすめていくうちに欠点が見えてきました。

📝 以前書いた記事

【jQuery】フォームに条件分岐（conditional logic）を設定する

2018年9月13日

例えばアンケートフォーム等で という設問があって、「その他」を選択すると、その下に新たに というテキストフォームが追加される、というのを作りたくて調べてみたら、このような仕様を conditional logic と言う...

その一つが、dependent.fields.jsで用意されているイベントハンドラはchangeのみで、初期読み込み時には実行してくれない点です。

なので、プラグイン自体を自分でカスタマイズするのも良いのですが、もっと他に手軽で使い勝手の良いものが無いか改めて探してみましたところ、良いプラグインが見つかりました。

それが「 dependsOn 」です。

https://dstreet.github.io/dependsOn

A jQuery plugin to facilitate the handling of form field dependencies.

ダウンロードはこちらから。

こちらのプラグインであれば、読み込み時にも実行してくれますし、オプションも多々揃ってますので、カスタマイズの柔軟性も高いと思います。

dependsOn オプション

サンプルでは、フォームをセレクターにして表示/非表示を切り替えていますが、それらを囲む親要素をセレクターにすれば、ラベルや複数のフォームもまとめて切り替えが出来ます。