jQueryを使った診断チェックシート

質問

チェックシートの事で質問させて頂きます。

ラジオボタンを使って診断結果を表示させたのですが、どう書けばいいのか迷っています。
内容は

Q1.あなたの好きな動物は？（◯はラジオボタンです）
◯犬　◯猫　◯鳥

Q2.あなたの好きな食べ物は？
◯ハンバーグ　◯グラタン　◯スパゲッティ

Q3.あなたの好きな色は？
◯赤　◯青　◯黄色

のような質問を出して、それぞれのラジオボタンのValueに数値を入れておいて
ボタンを押した時、Q1～Q3の合計点によって異なる結果を出したいと思っています。

このような診断チェックのプログラムをご存知の方がいたら
ぜひ教えて頂けないでしょうか。
よろしくお願いします。

回答No.1

tenderfeel · ベストアンサー

jQueryにはラジオボタンのセレクターが用意されているので
それを使うと簡単にラジオボタンだけ処理することができます。

$('input:radio')

すべてのラジオボタンの中からチェックされたものだけ得る場合は:checkedです。

$(':radio:checked')
または
$('input:radio').filter(':checked')

これをmapで処理してvalueを足せば合計点が計算できます。

var total = 0;
$(':radio:checked').map(function(){
total += Number(this.value);
});

診断ボタンを押した後に結果を表示するのなら、
上記の計算と結果の分岐・表示をボタンのクリックイベントで行います。

$('診断ボタン').click(function() {
//合計点の計算
//結果分岐・表示
});

http://jsfiddle.net/Tenderfeel/PFRCQ/