前回までの記事で紹介したように、フォームのラジオボタンを利用すれば以前紹介した
タブメニューのように選択状況を管理心無くても良いのでシンプルに機能を実現できます。
しかし予定している診断系コンテンツでは外部にデータを送ることはしないのでフォーム
を利用するのは違うような気もしますし、inputタグがある分htmlも複雑になってしまいます。
ということで、今回はフォームに頼らないラジオボタンを作成したいと思います。
とはいえ以前のタブメニューですでにラジオボタンを作成しているので必要ないと思うかも
しれません。しかし診断系コンテンツはタブメニューと同じ方法では実現できません。
ポイントとなるのはラジオボタンのセット数です。タブメニューでは1つのラジオボタン
セットしかないため、1つの変数で選択状態を管理することができます。しかし診断系
コンテンツでは、質問の数だけラジオボタンのセットがあり、それらをきちんと管理しな
ければならないのです。
まずはタブメニューと同じ考え方で、複数のラジオボタンのセットを作成した
サンプルを紹介します。
http://www.designdrill.jp/jquery/07/02_radio_08.html
まずはhtmlを確認してください。フォームのラジオボタンを利用していないので、とても
シンプルな構造になりました。また選択状態の管理に必要となるidはinputタグの代わりに
liタグに付けています。cssはラジオボタンのlabelに付けていた設定をliと合流させています。
jQueryはタブメニューのサンプルのクリックのイベントハンドラと比較してください。
考え方は全く同じです。
ではhtmlにもどって、機能を確認してください。常に1つが選択されるラジオボタン
なのですが、2つのセットを1つとして扱ってしまっています。タブメニューの方法
では、このように複数のラジオボタンのセットを扱うことはできません。
では、どの様にするかというと配列を利用して、各ラジオボタンのセット毎に選択されて
いる情報を管理するようにします。カリキュラムとの差別化のため詳しい説明は省きますが、
ソースにコメントで解説しています。以下のサンプルでソースを確認してください。
http://www.designdrill.jp/jquery/07/02_radio_09.html
配列を利用して効率的に各ラジオボタンの選択状況を管理しています。