【フォーム】チェックボックスのテキストを取得して表示【HTML & jQuery】
こんにちは。NNCの中里です。
本日は以前に某案件で作った仕組みを紹介したいと思います。
HTMLのform要素内にチェックボックスを配置し、ユーザーのクリックに応じて対応したテキストが表示される仕組みになります。
完成系は上のイメージのようになります。
チェックボックスを外した際には下のテキストも削除される仕様になっています。
完成例
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
ポイント
完成サンプルはform要素内のdivに対してclass属性値をcheck、name属性値をそれぞれ area / count / otherと付けています。
またテキストを表示するul要素内のliに対してそれぞれ area_field / count_field / other_fieldというclassを付けています。
jQuery側では.check input をクリックした際に親要素であるdivのname属性値を取得し、クリックしたinputに応じてテキストが表示されるように処理を行っています。
form内に新たなdivを追加する場合、divに対するname属性値とliに対するclass属性値の_field 前の文字列を揃えていただくだけで動作します！
- ・name属性area内のinputをクリック → inputのvalue属性値を取得して.area_fieldにテキストを表示
- ・name属性count内のinputをクリック → inputのvalue属性値を取得して.count_fieldにテキストを表示
- ・name属性area内のotherをクリック → inputのvalue属性値を取得して.other_fieldにテキストを表示
また以下の条件を作成して、テキストの表示・非表示を切り替えています。
- チェックボックスにチェックが入ったら → テキストを表示
- チェックボックスからチェックが外れたら → テキストを削除
ポイントは以上です。
class属性やname属性を変更する場合はHTML側とJS側それぞれを変更してください。
お問合せフォームの確認画面にも応用できる仕組みですので、是非活用してもらえたらと思います！
こちらの記事はいかがでしたか？
+1
2
+1
+1
+1
