ラジオボタンでチェックして遷移したい
以下のようにしたいのですが、わかりません。
○ 選択肢１
○ 選択肢２
○ 選択肢３
○ 選択肢４
[ボタン１] [ボタン２] [ボタン３]
選択肢１にチェックを入れてボタン１をクリックした場合、以下のリンク先に飛ぶ
リンク先：test01.html
⇒「ボタン1のvalue」＋「選択肢１のvalue」＋「.html」
以下、途中まで自分でつくったものをコメントに記載します
No.2
339
31
27pt
32
31
<form name="test" onsubmit="return false;">
<input name="link" type="radio" value="1">選択肢１
<input name="link" type="radio" value="2">選択肢２
<input name="link" type="radio" value="3">選択肢３
<input name="link" type="radio" value="4">選択肢４
<input name="ボタン１" type="image" src="botton1.gif" alt="ボタン１" width="101" value="test0" onclick="Answer('test0')">
<input name="ボタン２" type="image" src="botton2.gif" alt="ボタン２" width="101" value="test1" onclick="Answer('test1')">
<input name="ボタン３" type="image" src="botton3.gif" alt="ボタン３" width="191" value="test2" onclick="Answer('test2')">
</form>
<script type="text/javascript">
function Answer(val){
var box = document.forms['test'].elements['link'];
var flag = false;
var num;
for(var i = 0; i < box.length; i++) {
//チェックされていたらtrueにする
//ついでに何番目が選択されたか記録しておく
if(box[i].checked == true) {
flag = true;
num = i;
}
}
if (!flag) {
alert("選択肢を選択してください")
return
}
location.href = val + box[num].value + ".html"
}
</script>
No.1
51726
27pt
ラジオボタンValueの受け取り方法ですね。
http://www.site-cooler.com/kwl/javascript/10.htm
参考までに
ーーーーーーーーーーーーーーーーーーーーー
HTMLラジオボタン
http://www.tagindex.com/html_tag/form/input_radio.html
ラジオボタンでプルダウンメニューを変更する
http://iswebmag.hp.infoseek.co.jp/sample181.html
ラジオボタンのJavascript
http://www.tagindex.com/javascript/form/check5.html
基本的に、最初のうちは、上記のようなサンプルを写す事をお勧めします。
No.2
33931
ここでベストアンサー
27pt
<form name="test" onsubmit="return false;">
<input name="link" type="radio" value="1">選択肢１
<input name="link" type="radio" value="2">選択肢２
<input name="link" type="radio" value="3">選択肢３
<input name="link" type="radio" value="4">選択肢４
<input name="ボタン１" type="image" src="botton1.gif" alt="ボタン１" width="101" value="test0" onclick="Answer('test0')">
<input name="ボタン２" type="image" src="botton2.gif" alt="ボタン２" width="101" value="test1" onclick="Answer('test1')">
<input name="ボタン３" type="image" src="botton3.gif" alt="ボタン３" width="191" value="test2" onclick="Answer('test2')">
</form>
<script type="text/javascript">
function Answer(val){
var box = document.forms['test'].elements['link'];
var flag = false;
var num;
for(var i = 0; i < box.length; i++) {
//チェックされていたらtrueにする
//ついでに何番目が選択されたか記録しておく
if(box[i].checked == true) {
flag = true;
num = i;
}
}
if (!flag) {
alert("選択肢を選択してください")
return
}
location.href = val + box[num].value + ".html"
}
</script>
No.3
1504493
26pt
あんまり変わりませんが折角作ったので・・・。
回答2のonSubmit="return false;"の方法に気づかなかったので、
inputではなくimgのonclickで済ませようかと思っていました。
2パターンのサンプル。
<html> <body> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function Answer(elem) { var buttonValue = elem.getAttribute("value"); var radioValue; var radio = document.getElementsByTagName("input"); for(var i=0; i<radio.length; i++){ if(radio[i].checked) { radioValue = radio[i].value; //alert(buttonValue + radioValue + ".html"); return location = buttonValue + radioValue + ".html"; } } } </script> </head> <div> <form name="test" method="post" onSubmit="return false;"> <input name="link" type="radio" value="1">選択肢１ <input name="link" type="radio" value="2">選択肢２ <input name="link" type="radio" value="3">選択肢３ <input name="link" type="radio" value="4">選択肢４ <div> <input onclick="Answer(this)" name="ボタン１" type="image" src="botton1.gif" alt="ボタン１" width="101" value="test0"> <input onclick="Answer(this)" name="ボタン２" type="image" src="botton2.gif" alt="ボタン２" width="101" value="test1"> <input onclick="Answer(this)" name="ボタン３" type="image" src="botton3.gif" alt="ボタン３" width="191" value="test2"> </div> </form> </div> <div> <img onclick="Answer(this)" src="botton1.gif" alt="ボタン1" width="100" value="test0"> <img onclick="Answer(this)" src="botton2.gif" alt="ボタン2" width="100" value="test1"> <img onclick="Answer(this)" src="botton3.gif" alt="ボタン3" width="100" value="test2"> </div> </body> </html>
| 回答者 | 回答 | 受取 | ベストアンサー | 回答時間 | |
|---|---|---|---|---|---|
| 1 |  Mars |
203回 | 190回 | 20回 | 2010-03-17 11:05:53 |
2
1
1
コメント（2件)
<form name="test" onSubmit="return Answer();>
<input name="link" type="radio" value="1">選択肢１
<input name="link" type="radio" value="2">選択肢２
<input name="link" type="radio" value="3">選択肢３
<input name="link" type="radio" value="4">選択肢４
<input name="ボタン１" type="image" src="botton1.gif" alt="ボタン１" width="101" value="test0">
<input name="ボタン２" type="image" src="botton2.gif" alt="ボタン２" width="101" value="test1">
<input name="ボタン３" type="image" src="botton3.gif" alt="ボタン３" width="191" value="test2">
</form>
ラジオボタン部分のvalue値は以下の方法でもってこれるのですが、ボタンのvalueの取得方法がわかりません。
<script type="text/javascript">
function Answer(){
var box = document.forms['test'].elements['link'];
var flag = false;
var num;
for(var i = 0; i < box.length; i++) {
//チェックされていたらtrueにする
//ついでに何番目が選択されたか記録しておく
if(box[i].checked == true) {
flag = true;
num = i;
}
}
//box[num].valueでラジオボタンのvalue取得
}
</script>