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にもっとも多くチェックされた=あなたは茶色が好き
これはどういった計算で書けばいいのでしょうか?
本やネットを探してみましたが自分ではわかりませんでした。
初歩的な質問かもしれませんが何かヒントをくれると幸いです。
No.2ベストアンサー
- 回答日時:
<!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>
うおおおおおお!!
素晴らしすぎです!感激です!
これを改造して作っていこうと思います!!
ありがとうございましたm(_ _)m
No.1
- 回答日時:
選択肢ごとにカウンターを設定し最後に不等号式で判断すればいいだけでは?
つまり、設問1でAが選択されたらカウンターAを+1、以下設問2位光も同様の処理をする。
あとは分かりますよね。
小学生の算数と中学生レベルの数学の範疇のはずです。
さっそく回答ありがとうございます!!
私の説明不足でした!
おっしゃるとおりそのような計算式の概要はわかったのですが
具体的な計算式がわからなかったので
その参考となるスクリプトのヒントをもらえないかと思って質問しました。
自分で本などを見よう見まねで書いてみましたが
上手く動かなかったのでここで質問してみた次第です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ラジオボタンにタブインデック...
-
【javascript】firefoxでの、al...
-
ラジオボタンのチェックが外れ...
-
javascriptでクイズ
-
フォームPOST後「戻る」時のチ...
-
javascriptのラジオボタンの使...
-
radioボタンの値の取得の仕方?
-
データベースの値を判断してラ...
-
ラジオボタン未チェックの場合...
-
jQueryで複数のラジオボタンを処理
-
return trueとreturn falseの用...
-
プルダウン選択を変更すると、...
-
チェックボックス付きのテーブ...
-
value内に変数を入れたい
-
<JavaScript>tableタグを入力不...
-
【javascript・PHP】プルダウン...
-
JSPとJavaScriptの連携について...
-
連動プルダウンのclonenode
-
チェックボックスのON/OFFでVal...
-
同名ボタンのクリック時要素番...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
javascriptを使ってラジオボタ...
-
ラジオボタンにタブインデック...
-
ラジオボタンのチェックが外れ...
-
javascript作成してます。ラジ...
-
ラジオボタンにチェックを入れ...
-
ラジオボタン未チェックの場合...
-
チェックされたラジオボタンに...
-
Jvasvriptのlengthで個数が取得...
-
フォームPOST後「戻る」時のチ...
-
データベースの値を判断してラ...
-
チェックボックスのON/OFFに連...
-
ラジオボタンでチェックした項...
-
サイト内にGoogleサイトを表示...
-
JavaScript ラジオボタン デ...
-
ラジオボタンでdisabledとchecked
-
リンク文字クリックでラジオボ...
-
ポップアップウインドウで選択...
-
jQueryで複数のラジオボタンを処理
-
js radioボタンの「name」を多...
-
ラジオボタンとif文
おすすめ情報