こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

最も多くチェックされた項目を調べる

javascriptで最も多くチェックされた項目を調べて
それぞれのページに分岐するようにしたいです。


以下はサンプル


<form onSubmit="return color(this)">

好きな動物は?
<label><input type="radio" name="q1" value="A">うさぎ</label>
<label><input type="radio" name="q1" value="B">カメ</label>
<label><input type="radio" name="q1" value="C">イルカ</label>
<label><input type="radio" name="q1" value="D">くま</label>


好きな場所は?
<label><input type="radio" name="q2" value="A">空</label>
<label><input type="radio" name="q2" value="B">森</label>
<label><input type="radio" name="q2" value="C">海</label>
<label><input type="radio" name="q2" value="D">畑</label>


好きな食べ物は?
<label><input type="radio" name="q3" value="A">豆腐</label>
<label><input type="radio" name="q3" value="B">ブロッコリー</label>
<label><input type="radio" name="q3" value="B">なす</label>
<label><input type="radio" name="q3" value="D">ハンバーグ</label>
<input value="診断">
</form>


答えは以下のようにしたいです。

Aにもっとも多くチェックされた=あなたは白が好き
Bにもっとも多くチェックされた=あなたは緑が好き
Cにもっとも多くチェックされた=あなたは青が好き
Dにもっとも多くチェックされた=あなたは茶色が好き



これはどういった計算で書けばいいのでしょうか?
本やネットを探してみましたが自分ではわかりませんでした。
初歩的な質問かもしれませんが何かヒントをくれると幸いです。

投稿日時 - 2014-05-09 05:00:24

QNo.8587233

困ってます

質問者が選んだベストアンサー

<!DOCTYPE html>
<title></title>
<meta charset="utf-8">
<body>
<form onsubmit="color(event)">

<p>好きな動物は?
<p>
<label><input type="radio" name="q1" value="A">うさぎ</label>
<label><input type="radio" name="q1" value="B">カメ</label>
<label><input type="radio" name="q1" value="C">イルカ</label>
<label><input type="radio" name="q1" value="D">くま</label>


<p>好きな場所は?
<p>
<label><input type="radio" name="q2" value="A">空</label>
<label><input type="radio" name="q2" value="B">森</label>
<label><input type="radio" name="q2" value="C">海</label>
<label><input type="radio" name="q2" value="D">畑</label>


<p>好きな食べ物は?
<p>
<label><input type="radio" name="q3" value="A">豆腐</label>
<label><input type="radio" name="q3" value="B">ブロッコリー</label>
<label><input type="radio" name="q3" value="C">なす</label>
<label><input type="radio" name="q3" value="D">ハンバーグ</label>

<p>
<input type="submit" value="診断">
</form>

<script>
function color (event) {
 var col = {A: '白', B:'緑', C:'青', D:'茶色'};
 var form = event.target;
 var list = [
  form.querySelectorAll ('input[type="radio"][name^=q][value="A"]:checked'),
  form.querySelectorAll ('input[type="radio"][name^=q][value="B"]:checked'),
  form.querySelectorAll ('input[type="radio"][name^=q][value="C"]:checked'),
  form.querySelectorAll ('input[type="radio"][name^=q][value="D"]:checked')
 ];
 var radio = list.reduce (function (a, b) { return a.length < b.length ? b: a});
 var result = radio.length ? col[radio[0].value] + 'が好き': 'ひねくれもの';
 
 alert ('あなたは、' + result);
 
 event.preventDefault ();
}
</script>

投稿日時 - 2014-05-09 06:20:48

お礼

うおおおおおお!!
素晴らしすぎです!感激です!


これを改造して作っていこうと思います!!
ありがとうございましたm(_ _)m

投稿日時 - 2014-05-09 08:00:05

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

選択肢ごとにカウンターを設定し最後に不等号式で判断すればいいだけでは?

つまり、設問1でAが選択されたらカウンターAを+1、以下設問2位光も同様の処理をする。

あとは分かりますよね。
小学生の算数と中学生レベルの数学の範疇のはずです。

投稿日時 - 2014-05-09 05:35:17

お礼

さっそく回答ありがとうございます!!


私の説明不足でした!

おっしゃるとおりそのような計算式の概要はわかったのですが
具体的な計算式がわからなかったので
その参考となるスクリプトのヒントをもらえないかと思って質問しました。


自分で本などを見よう見まねで書いてみましたが
上手く動かなかったのでここで質問してみた次第です。

投稿日時 - 2014-05-09 06:06:19

あなたにオススメの質問