- ベストアンサー
ラジオボタンで診断テストを作成したい
- Yes、No形式で10問のラジオボタンから選択し、Yesの数に応じ5通りのリンク先にジャンプするようなサイトを作成しようと思っています。
- 調べているうちに同様の質問を見つけましたが、理想的にはYesの数を数値に置き換えてリンク先を設定したいです。
- 具体的な方法がわかりませんが、このような要件を満たす方法について教えていただけると助かります。
- gulyarg
- お礼率51% (14/27)
- JavaScript
- 回答数6
- ありがとう数12
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
他の方の回答から一部もらってますがサンプルです。 <script type="text/javascript"> function sample(F){ var list = { 0:'htp://example.com/a.html',//0以下 2:'htp://example.com/b.html',//2以下 5:'htp://example.com/c.html', 8:'htp://example.com/d.html', 10:'htp://example.com/e.html' }; var i=0; var q; var c=0; var key=0; while( q = F.elements[ i++ ] ) if(q.type=='radio' && q.checked) c+= parseInt(q.value); for(key in list) { if(c <= parseInt(key)) { location.href = list[key]; break; } } return false; } </script> </head> <body> <form onsubmit="return sample(this)"> <p> Q1. <label><input type="radio" name="q1" value="1" checked>Yes</lebel> <label><input type="radio" name="q1" value="0">No</lebel> </p> <p> Q2. <label><input type="radio" name="q2" value="1" checked>Yes</lebel> <label><input type="radio" name="q2" value="0">No</lebel> </p> ～略～ <input type="submit" value="診断"> </form> Yesのvalueを2以上にしたり、 Yesを0、Noを1にすることで結果予測をしずらくすることもできます。
その他の回答 (5)
- zeff
- ベストアンサー率69% (137/198)
＞babu_babooさん あ、そうかぁ。アレではグローバル変数になってしまうんですね＾＾； １つ勉強になりました、ありがとうございます。 var i, r = document.getElementById("form1").getElementsByTagName( 'input' ), yc = 0, nc = 0; に訂正します。
- babu_baboo
- ベストアンサー率51% (268/525)
nc って、ぐろ～ばるだじょ！ええのんかぁ～
- babu_baboo
- ベストアンサー率51% (268/525)
あ～ちぇっくがあまかった。 どっちみち、radio で checked == true で value="yes" をかうんとするだけ <!DOCTYPE html> <title></title> <body> <form action="#"> <p> <input type="radio" name="q1" value="yes" checked> <input type="radio" name="q1" value="no"> </p> <p> <input type="radio" name="q2" value="yes" checked> <input type="radio" name="q2" value="no"> </p> <p> <input type="button" value="check" onclick="jump()"> </p> <script type="text/javascript"><!-- function jump() { var c = 0, i = 0, p = document.getElementsByTagName( 'input' ), q; while( q = p[ i++ ] ) c += ('radio' == q.type && q.checked && 'yes' == q.value); location.href=[ 'htp:ww0.ne.jp', 'htp:ww1.ne.jp', 'htp:ww2.ne.jp', 'htp:ww3.ne.jp' ][c]; } </script>
- zeff
- ベストアンサー率69% (137/198)
<script type="text/javascript"> <!-- function sample() { var i, r = document.getElementById("form1").getElementsByTagName( 'input' ), yc = nc = 0; for( i = 0; i < r.length; i+=2 ){ if( r[i].type == 'radio' && r[i+1].type == 'radio'){ yc += ( r[i].checked ); nc += ( r[i+1].checked ); } } if( yc + nc != 10 ){ window.alert("いくつかチェックし忘れています。"); return false; } alert(yc); return false; } //--> </script> </head> <body> <form name="form1" id="form1" action="#" onsubmit="return sample();"> <p> <label for="y1"><input type="radio" name="q1" id="y1" value="yes">yes</label> <label for="n1"><input type="radio" name="q1" id="n1" value="non">non</label> </p> <p> <label for="y2"><input type="radio" name="q2" id="y2" value="yes">yes</label> <label for="n2"><input type="radio" name="q2" id="n2" value="non">non</label> </p> <p> <label for="y3"><input type="radio" name="q3" id="y3" value="yes">yes</label> <label for="n3"><input type="radio" name="q3" id="n3" value="non">non</label> </p> <p> <label for="y4"><input type="radio" name="q4" id="y4" value="yes">yes</label> <label for="n4"><input type="radio" name="q4" id="n4" value="non">non</label> </p> <p> <label for="y5"><input type="radio" name="q5" id="y5" value="yes">yes</label> <label for="n5"><input type="radio" name="q5" id="n5" value="non">non</label> </p> ※※文字数制限につき中略※※ <p> <label for="y8"><input type="radio" name="q8" id="y8" value="yes">yes</label> <label for="n8"><input type="radio" name="q8" id="n8" value="non">non</label> </p> <p> <label for="y9"><input type="radio" name="q9" id="y9" value="yes">yes</label> <label for="n9"><input type="radio" name="q9" id="n9" value="non">non</label> </p> <p> <label for="ya"><input type="radio" name="qa" id="ya" value="yes">yes</label> <label for="na"><input type="radio" name="qa" id="na" value="non">non</label> </p> <p><input type="submit" value="check"></p> </form> </body> </html> とか。 あとはyes/nonの数を元にどのように分岐したいのかを提示すれば、 より良い回答がつくと思います
- babu_baboo
- ベストアンサー率51% (268/525)
にちようび。 こんなのは？（ぜんかくくうはくは、はんかくに） function jump() { var c = 0, i = 0, p = document.getElementsByTagName( 'input' ), q; while( q = p[ i++ ] ) c += ('radio' == q.type && q.checked); location.href=[ 'htp:ww0.ne.jp', 'htp:ww1.ne.jp', 'htp:ww2.ne.jp', 'htp:ww3.ne.jp' ][c]; }
