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

解決済

質問者：trueplace
質問日時：2014/05/09 05:00
回答数：2件

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にもっとも多くチェックされた=あなたは茶色が好き

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1

回答者： bardfish
回答日時：2014/05/09 05:35

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

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

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

- 0
- 件

通報する

この回答へのお礼

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

私の説明不足でした！

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

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

通報する

お礼日時：2014/05/09 06:06

No.2ベストアンサー

回答者： babu_baboo
回答日時：2014/05/09 06:20

<!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>