この人頭いいなと思ったエピソード

ラジオボタンで診断テストを作成したい

解決済

  • 質問者：gulyarg
  • 質問日時：
  • 回答数：6件

ラジオボタンで診断テストを作成したい

Yes、No形式で10問のラジオボタンから選択し、
Yesの数に応じ5通りのリンク先にジャンプするようなサイトを作成しようと思っています。

調べているうちに下記のような同様の質問を発見したのですが、
http://detail.chiebukuro.yahoo.co.jp/qa/question …
これだと2の10乗、1024通りのリンクを設定しないといけません。

例えばYesを1、Noを0などの数値に置き換えて、
Yesの数が1-3個は"http://～～"、4-6個は"http://～～"
という風には設定できないのでしょうか？

わかりにくい説明で申し訳ありませんが、
よろしくお願いします。

通報する

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

質問の本文を隠す

A 回答 (6件)

No.6ベストアンサー

  • 回答者： steel_gray
  • 回答日時：

他の方の回答から一部もらってますがサンプルです。



<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にすることで結果予測をしずらくすることもできます。
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： zeff#1
  • 回答日時：

＞babu_babooさん


あ、そうかぁ。アレではグローバル変数になってしまうんですね＾＾；
１つ勉強になりました、ありがとうございます。

var
i,
r = document.getElementById("form1").getElementsByTagName( 'input' ),
yc = 0,
nc = 0;

に訂正します。
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： babu_baboo
  • 回答日時：

nc って、ぐろ～ばるだじょ！ええのんかぁ～

    • good
    • 0
    • 件
通報する

No.3

  • 回答者： babu_baboo
  • 回答日時：

あ～ちぇっくがあまかった。


どっちみち、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>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： zeff#1
  • 回答日時：

<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の数を元にどのように分岐したいのかを提示すれば、
より良い回答がつくと思います
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： babu_baboo
  • 回答日時：

にちようび。



こんなのは？（ぜんかくくうはくは、はんかくに）

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];
}
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報