前回までの記事で紹介したように、フォームのラジオボタンを利用すれば以前紹介した
タブメニューのように選択状況を管理心無くても良いのでシンプルに機能を実現できます。

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

　
—以下：windows IE以外のブラウザで確認してください。–
　
　
では前回、見つけた[ ] で属性を指定するテクニックを利用して、ラジオボタンを完成
させたいと思います。リファレンス：[attribute=value]

　
今回のサンプルは上記の１つだけです。それではコードを確認しましょう。
まずクリックされたラジオボタン（inputタグ）のname属性を取得します。
これはidの取得と同じようにthisを利用して以下の様に取得できます。

var myGroup = this.name;	

　
次にここで得られたname属性をセレクタに組み込みます。以下のソースは変数を
利用して分かり肉のですが”[name=属性名]”という状態になるようにしています。
以下の例のようにチェックが付いた状態である「:checked」は属性の後に追加します。

$("input[name=" + myGroup + "]:checked").parent().addClass("selected");

name属性を指定している以外は02_radio_02b.htmlと同じ事を確認してください。上記は
選択状態にしている行ですが、選択を解除する行も同じようにセレクタをしています。
　
これで前回のコードよりも簡単に、自分の属するラジオボタンだけ設定できる
ようになりました。ですが…
　
ラジオボタンを利用するとhtmlの階層が深くなります（css装飾のためliで囲まない
といけない）。ラジオボタンを利用すると選択肢の管理をしなくても良いのでラク
だと思うのですが以前作成したタブのようにhtmlのラジオボタンを利用しなくても
ラジオボタンは作成できます。
　
ですので次回はラジオボタンを利用しないで、診断系コンテンツを作成できるか
試したいと思います。
　
　
　

　
—以下：windows IE以外のブラウザで確認してください。–
　

cssによるラジオボタンの装飾(1)の記事の後で、thisを利用して効率よく作成する方法を
考えて試していたのですが…。予想以上に分かりにくいコードになってしまいました。
ですので、今回の記事は参考として見て貰えたらと思います。カリキュラムにも組み込ま
ないと思います（コラム的な話しとして載せるかもしれませんが）。

thisから辿って自分の属するラジオボタンだけ調べる

まず前回の不満点は、ラジオボタンをクリックすると全てのラジオボタンをしらみつぶしに
調べてcssのselectedクラスを付けたり外したりしているので効率が悪いという点でした。
それに対する考えが、クリックされたラジオボタン（this）から辿って、自分が属する
ラジオボタンだけ調べるというものです。選択する処理を、この考え方で作成したサンプル
が02_radio_05.htmlです。
http://www.designdrill.jp/jquery/07/02_radio_05.html
　
開いてソースコードを確認してください。まずはhtml部分です。前回同様に一番下の
ラジオボタンにcheckedの設定がしてあります。これを確認したらhtmlで上のグループの
ラジオボタンを選択してください。前回と異なり下のcheckedのラジオボタンは反応しません。
　
このことから今回のコードでは、自分の属するラジオボタン以外は処理していないことが
確認できます（そのため前回よりは効率的と言えます）。ではjQueryのソースを確認して
ください。ポイントは以下の１行です。

$(this).parent().parent().find("input:checked").parent().addClass("selected");		

　
まずは「$(this).parent().parent()」まで解説します。thisはクリックされたラジオボタン
（inputタグ）ですから二階層上がる（parent().parent()）ことでulタグを指すことになり
ます（qBoxクラス）。このulタグでラジオボタンのグループを構成しているので、
この時点でクリックされたラジオボタンの属する全てのラジオボタンを見渡せます。
そして初登場のfindメソッドです。
　
findメソッドは引数に設定されたセレクタに該当するものを見つけて選択します。
リファレンス：find(expr)
　
このサンプルではセレクタに「input:checked」と書いたので、選択したラジオボタンが
選択されることになります。あとは前回と同じです。壱階層上がってliにselectedクラス
を付けることで背景を切り替えます。
　
02_radio_05.htmlは選択解除されたラジオボタンを戻す処理をしていません。こちらも
同じような考えで処理したサンプルを用意しました。02_radio_06.htmlを開いてソースを
確認してください。
http://www.designdrill.jp/jquery/07/02_radio_06.html

$(this).parent().parent().find("input:not(:checked)").parent().removeClass("selected");

　
前回紹介したnotを利用して選択されていないものからselectedクラスを外すだけです。
これで前回のサンプルよりも効率の良い処理になりましたが、コードが長すぎて分かり
にくくなってしまいました。なので最初に説明したとおり、これはボツ案です。
　
今回のサンプルを作成しているときに「これは流石に無いな〜」と別の方法を探して
見つかったのが以下のセレクタの指定方法です。attributeは属性なので、ここに
inputタグのname属性を利用すれば、指定したラジオボタンのグループだけを設定
することができます。
リファレンス：[attribute=value]
　
これにもう少し早く気が付いていれば、今回の記事は無くなっていたのですが..
ほとんど記事を書いた後で気が付いたので…。
　
　
　

本日の記事「cssによるラジオボタンの装飾(1)」にて読者様より、windowsのIEで機能しない
とのご連絡を受けました。制作環境がmacなので、忙しいとついwindowsチェックを怠って
しまいます（仕事では怠りませんよ）。
　
で早速原因を調査したところ、結論としては以下の様になりました。

　
—以下、windowsIEで確認してください–
検証に利用したサンプルです。２つのサンプルともinputタグ（ラジオボタン）をクリック
したらアラートを表示するだけのシンプルな処理です。２つの違いはinputタグをdisplay:noneで
消すか否かです。02_radio_win01b.htmlでは消すようにしています。結果としてdisplay:noneで
ラジオボタンを消している方だけ、クリックが認識されずアラートが表示されません。
http://www.designdrill.jp/jquery/07/02_radio_win01.html
http://www.designdrill.jp/jquery/07/02_radio_win01b.html
　
labelを利用しているので、文字部分をクリックしたら反応してくれても良さそうなのですが…
labelまで無効だと、私には回避策が思いつきません。こういうときはgoogle先生に、似たような
サンプルを探してもらうことにしましょう。
　
ピッタリ同じものは見つからなかったのですが、とても参考になるサンプルが見つかりました！
Pretty checkboxes with jQuery
　
このサイトではラジオボタンではなく、チェックボックスですがdisplay:noneの設定がして
あります。そしてwindowsIEでもきちんと機能しています！。早速仕組みを解読すると、
以下のスタンスで解決していました。

　
見つけたサンプルのソースを確認しましょう。まずはチェックを入れる部分のセレクタです。
以下の様にinputを利用していません。inputを利用すると私のサンプルのようにwindowsIEで
クリックできないためでしょう。

$(".checklist .checkbox-select").click(

　
inputをクリックできないのですから、チェックはjQueryで入れないといけません。それを
実行している処理が以下の部分です。attrメソッドでcheckeの設定にしています。

$(this).parent().find(":checkbox").attr("checked","checked");

　
これでinputがクリックできなくても対応することができます。しかし、これはwindowsIE
に対する処理であり、正常に機能するブラウザでは、チェックを入れる処理を２重に行って
いることになります。同じ処理なので問題ないと思いますが、このサンプルではその対応と
して本来のフォームの処理をOFFにしています。その部分が以下の処理です。

function(event) {
　event.preventDefault();

　
これまで紹介した私のサンプルではクリックのイベントハンドラのfunctionの（）内には
何も設定しませんでしたが、ここには引数でイベントの情報（イベントオブジェクト）が
送られてきます。その情報に対してevent.preventDefaultメソッドを利用すると、本来の
機能がキャンセルされます。これを利用して他のブラウザで処理が２重に行われるのを
避けています。
リファレンス：jQuery.Event
※ページが長いですが、最後のMethodsの項目にpreventDefaultがあります。
　
上記の方法を踏まえて、修正したサンプルが02_radio_win02.htmlです。jQueryでラジオ
ボタンにチェックを入れる処理を追加しました。
http://www.designdrill.jp/jquery/07/02_radio_win02.html
　
しかし02_radio_win02.htmlのコードは見つけてきたサンプルに影響されています。なので、
私のサンプルに合わせて効率化していきましょう。先に効率化したサンプルを紹介します。
http://www.designdrill.jp/jquery/07/02_radio_win03.html
　
まずはイベントのセレクタを確認してください。02_radio_win02.htmlではラジオボタンの
代わりにlabelを指定しましたが、ラジオボタンが機能しないならlabelに固執する必要は
ありません。ですのでqBoxのliまでにしました。その方がクリック範囲も大きいので良い
でしょう。
　
　
セレクタの範囲が異なったので、以下の様にチェックを入れる処理からparentを消すこと
ができコードが短くなりました。ということで、今回の解決案として02_radio_win03.html
が完成しました。
　
　

最終的にはラジオボタン使いません

実は先週末にこの「ラジオボタンの装飾」シリーズはまとめ書きして終えています。
最終的にはフォームのラジオボタンに頼らずに、以前紹介したタブメニューの応用で
実現します。理由としては、診断系ではサーバーにデータを送るわけではないので、
関係ないフォームを利用するのは良くないということ、フォームのラジオボタンを
利用しない方がhtmlをスッキリ、シンプルに書くことができるためです。
　
上記のようなことと、今回のIEの問題があるので、途中の記事を省略することも
考えたのですが、これは私の備忘録的にも省略せずに掲載しようと思います。
　
という分けで、予定を変更せず、あと２回、フォームのラジオボタンを利用した
記事を掲載します。
　
　
　

jQueryの機能を確認するためにはデザイン要素を省いたサンプルの方が分かりやすいけれど
実際のカリキュラムに仕上げるためには、デザイン要素も大切と考えています。
私はフォームに関してのcss経験はほとんど無いので、ここで学んでおこうと思います。
ラジオボタンをcssでどれくらい装飾できるのかを。
　
最初は段階的にサンプルを紹介しようとしていたのですが、一気に作成してしまいました。
02_radio_01.htmlではラジオボタンのUIを消しているため、ラジオボタンと気が付きません
ので、ラジオボタンを消していないサンプル02_radio_01b.htmlも用意しました。
http://www.designdrill.jp/jquery/07/02_radio_01.html
http://www.designdrill.jp/jquery/07/02_radio_01b.html
　
自分が戸惑った点、ここで学んだ点などを備忘録としてメモしておきます。

・inputタグ自体に背景を設定しても、ラジオボタンの狭い部分にしか背景が付かない
　なのでliタグを利用して背景を設定。
　
・display: none;でラジオボタンの既存のUIを消すことができる。
　
・labelタグを利用すればテキストをクリックしてもラジオボタンを変更できるようになる。

・背景画像を差し換えるよりも以下の様に１つの画像にまとめれば、ロードの問題を気にしなく
　てもが無いためよい。この画像のpositionを変更することで画像が変わるように見える。
　

　
サンプル02_radio_01.htmlはラジオボタンのUIを消しているため、視覚的にラジオボタン
として機能しません。ですので、jQueryを利用してラジオボタンの状態に合わせて背景画像を
変更し、ラジオボタンとして完成させます。
　
jQueryではフォームに関連する処理が充実しており、ラジオボタンの状態に関連するセレクタ
があります。サンプル02_radio_02.htmlを開いてソースを確認してください。
http://www.designdrill.jp/jquery/07/02_radio_02.html
　
ポイントは以下のセレクタの部分です。「input:checked」とすることでチェックが入っている
ラジオボタンすべてを選択することができます。以下の例ではinputタグのうちチェックが入った
（つまり選択されている）ものを選択できます。そして選択されたラジオボタンに対してそれを
含む親階層、つまりliにCSSのselectedクラスを付けて背景画像を変更しています。

$(".qBox input:checked").parent().addClass("selected");

　
ですが、これでは選択を解除されたラジオボタンの処理をしていないため、クリックした
選択肢が全て選択されていくような状態になってしまいます。ですので、以下の処理を
追加して選択されていないラジオボタンのselectedクラスを外します。ここでのポイント
は:not( )です。これをセレクタに利用すると「そうでない」
状態のものを選択できます。以下の例ではnotの（）内に:checkedが入っているので、
チェックがない（つまり選択されていない）ものを選択できるのです。

$(".qBox input:not(:checked)").parent().removeClass("selected");

　
実際にこれを追加したサンプル02_radio_02b.htmlを開いて確認してください。きちんと
ラジオボタンとして、視覚的に機能していることが確認できます。
http://www.designdrill.jp/jquery/07/02_radio_02b.html
　
　
　

補足と問題点

これでラジオボタンのcssによる装飾は完了のように感じますが、補足と問題点を記して
おきます。まず選択されたときのセレクタの別案です。サンプル02_radio_03.htmlの
ソースを確認してください。選択された際のセレクタの処理が以下の様になっています。
http://www.designdrill.jp/jquery/07/02_radio_03.html

$(this).parent().addClass("selected");

　
クリックされた選択肢を選択する場合は、上記のようにラジオボタンの仕組みに頼らず
this（この場合はクリックされたinputタグを指します）を利用して対応することができます。
　
　
問題点としては（ほとんど問題ではないのかもしれません）現在のセレクタでは、すべて
ラジオボタンをしらみつぶしに調べてselectedクラスを付けたり外したりする点です。
このことが分かるようにサンプル02_radio_04.htmlを用意しました。
http://www.designdrill.jp/jquery/07/02_radio_04.html
　
02_radio_04.htmlを開いてソースを確認してください。まずhtmlです。ラジオボタンが
２セットあり、下のセットの一番下の選択肢を確認してください。checkedの設定が
されています。ですが開いた時点ではselectedクラスが付いていないので視覚的には
判別できません。これを確認したらhtmlにもどり上のセットのどの選択肢でもよいので
クリックしてください。すると関係ないはずの下のセットのcheckedの付いた選択肢
も表示が変わったはずです。このことからも、しらみつぶしにラジオボタンの状態を
調べて処理していることが確認できると思います。

以前のタブのように１ページ内での選択肢の数が少なければ問題ないのですが、診断系の
ケースでは多くなります（Flashのサンプルでは５問ｘ５選択肢で25の選択肢）。とはいえ
それでも数十なので現在のマシンスペックを考えると問題ないのかもしれません。
　
ですが、なるべく処理負荷を減らしたいので次回は別案を考えたいと思います。
要はもっと効率よいセレクタを考えることです。ポイントとしてはクリックされた
ラジオボタン自身から考える。つまりthisを使うことがキーになりそうです。
　
　
　　
　
　

　
　
前回はラジオボタンを並べただけですが、今回はFlash版のように設問に回答するごとに
スライドさせていくようにします。まずは前回のサンプルにcssを追加して横に並べて
みました。
http://www.designdrill.jp/jquery/07/01_check_02.html
　
続いて１問分しか表示されないようにcssでoverflow:hidden;を設定したdivの中に
設問達を入れます。そして確認用にmoveボタンを追加して、クリックで次の設問に
移動するようにしました。このあたりの仕組みはすでにスライダー型ショウケース
で紹介したとおりです。
http://www.designdrill.jp/jquery/07/01_check_03.html
　
次はmoveボタンではなく設問をクリックしたら移動するようにします。これは
簡単で、設問が変わったときのchangeイベントのイベントハンドラ内で移動用の
関数moveFuncを実行するだけです。
http://www.designdrill.jp/jquery/07/01_check_04.html
※ソースにコメントでポイントの説明があります
　
しかし01_check_04.htmlは「ある操作」をすると設問を飛ばしてしまうバグが
あります。ある動作とは「設問をクリックした後、素早く別の設問をクリック」
することです。こうすると２回設問がクリックされることになるので２ページ文
進んでしまうのです。
　
これを避けるため、選択されたラジオボタンのIDから現在の質問IDを取得して
これを元に移動するページを決めるようにします。それが01_check_05.htmlです。
http://www.designdrill.jp/jquery/07/01_check_05.html
　
ソースを確認してください。ポイントは移動用の関数moveFuncを実行する際に
引数で現在の質問ID（ques_id）に１足した値を渡していることです。１足すこと
によって次の設問を指すことになります。これを受け取ったmoveFuncでは、
この値を元に移動先を算出しています。ループ処理は必要ないので削除しました。
これで複数の設問をクリックしてもページを飛ばすことはなくなります。
　
診断系の仕組みとしては01_check_05.htmlで完成なのですが、もうすこし改良
しましょう。01_check_05.htmlでは選択肢をクリックするとすぐに移動します
が、これではなんだか急な印象を受けます。そこでクリックしたらしばらく間
をおいてから移動を開始するようにします。
http://www.designdrill.jp/jquery/07/01_check_06.html
　
ソースを確認してください。ポイントは移動処理に追加された以下の
delayメソッドです。このメソッドは引数で設定されたミリ秒だけ処理を遅らせます。
そのため以下の例では0.5秒後に移動するようになります。

$("#qContainer").stop(true, false).delay(500).animate({left: myPos},500);

　
移動が遅れるから違和感が出ると思うかもしれませんが、01_check_05.htmlと比較
すると01_check_06.htmlのほうが自然に感じると思います。
　
これで今回は終わりです。次回はラジオボタンをcssで装飾することに挑戦する
予定です。私はフォームを扱ったことはほとんど無いので、cssでラジオボタンを
どれ位くらい装飾できるか確認しなくては！なのです。
　
　
　

以前の記事にも書いたように既存の書籍やサイトと被らないコンテンツとして診断系
コンテンツを考えているので、試しにラフ作成する事にします（カリキュラムの教材に
するときはデザイン的にも完成させます）。またカリキュラムとの差別化をするため、
基礎的な説明は省きます。
　

　
今回説明するのは、上記の１サンプルだけです。早速ソースを確認してください。
まずはhtmlから見ていきましょう。設問はラジオボタンのタグで作成されていますが
サーバーなどにデータを送ることはしないのでformタグは省略しています。
html部分でのポイントはラジオボタン（inputタグ）につけたidです。このid部分で
得点を判断するので、きちんと設定する必要があります。今回idは以下のルールで
設定しています。配列を利用するので番号は0から始めたほうが良いでしょう。

「name属性の値 + "_" + value属性の値」

　
そして最後に得点表示用のdivを設置しました。これについては特に注意点はありません。
cssの設定は、この得点表示に関するものだけです。
　
ではjQueryの説明に入ります。はずは配列を２つ用意します。answerArrayは質問毎の得点を
記憶する配列です。

//---各問の得点の記憶用配列
answerArray = [0,0,0,0];

　
scoreArrayは各設問の得点を設定（選択したときに入る得点です）する配列です。
得点を設定している配列は２次元配列（配列の中に配列が入っている）になっており
各質問毎の選択肢の得点が設定されています。

//---各設問の得点表
scoreArray = [
	[25,20,15,10,5],//---Q1の得点表
	[25,20,15,10,5],//---Q2の得点表
	[25,20,15,10,5],//---Q3の得点表
	[25,20,15,10,5] //---Q4の得点表
];

　
つづいてラジオボタンがクリックされたときの処理です。イベントはclickでも良いと
思いますが、同じ選択肢がクリックされたときは処理しなくても良いので、内容に
変更があった際に実行されるchangeイベントを利用しました。

$("input").change(function(){

　
ラジオボタンの選択肢がクリックされたら、まず何点の選択肢がクリックされたかを
得点設定の配列scoreArrayを利用して調べます。クリックされたラジオボタンのidを取得
して、その値をsplitで分解し、問題ID（name属性の値）と選択肢ID（value属性の値）に
分けます。このときidは文字列なので、Numberメソッドを利用して数値に変換しておきます。

var temp = this.id.split("_");//---区切り記号を"_"にして配列に分割
var ques_id = Number(temp[0]);//---質問IDを取得（数値化）
var ans_id = Number(temp[1]);//---選択肢IDを取得（数値化）

　
このように得た２つのidを要素番号として得点設定の配列に利用し、その質問での選択肢の
得点を所得します。２次元配列は配列の中に配列が入っているため、以下の様に２つの
要素番号で値を取得します。

var myScore = scoreArray[ques_id][ans_id];

　
こうして得た得点はanswerArrayに記憶しておきます。そしてanswerArray内の得点を
すべて加算することで合計得点を求め、得点用のdivに表示するわけです。
　
最後に合計得点を算出するcalcTotalScoreを簡単に説明して終わります。

function calcTotalScore() {
	var totalScore = 0;
	for (var i in answerArray) {
		totalScore += answerArray[i];
	}
	return totalScore;
}

　
まず加算用の変数totalScoreに0を代入します。続くfor in文で得点を記憶している
answerArrayから要素を抜き出しtotalScoreに加算していきます。全ての加算が完了
したらreturnで結果を返します。
　
今回は全てのラジオボタンを縦に並べて表示しましたが、次回はFlash版のように
各設問に回答したらスライドして次の設問に移動するようにします。　
　
　
　

タブに文字を入れる

前回のタブメニューは画像で作成したためメニューに文字を入れることができませんでした。
画像に文字を重ねて表示することは可能ですが、ここではdivの背景画像に画像を付けて対応します。

　
難しいjQueryの処理はないので、早速01_tab_08.htmlのソースを確認しましょう。まずは
cssを確認します。ポイントはタブが選択された（tab_on）とタブが選択されていない
（tab_off）２つのcssが用意されている点です。特に背景画像の設定やカーソルの指定に
注目してください。この２つの設定を利用してタブの切り替えを実現します。
続いてhtmlですが、これまでと異なり始めからtab_offのクラスを付けています。
　
続いてjQueryですが、これはほとんど前回と変わりません。異なるのは考え方で、
jQueryではhtmlで最初に付けているclassを外すことはできないので、tab_offクラスを
tab_onで上書きしています。
　
　
　

マウスオーバーで画像を変える

続いてマウスオーバーで画像を変更するようにしました。

　
このサンプルは01_tab_08.htmlにマウスオーバージの処理を追加しただけです。ソースを開いて
hoverのイベントハンドラが追加されているのを確認してください。マウスオーバーしたら
tab_overクラスを付けて、マウスアウトしたら外すようにしています。そして、ここでのポイント
はすでに選択されているタブ（selectID）だったら処理しないようにしている点です。選択されて
いるタブはマウスを重ねても反応してはいけません。
　
これでブログでのラジオボタンの記事はお終いです。次はフォームのラジオボタンを利用した
簡易的な診断系コンテンツについて書こうと思います。