HTML、javascriptに詳しい方、教えて下さい。



ラジオボタンでチェックして遷移したい

以下のようにしたいのですが、わかりません。

○ 選択肢1
○ 選択肢2
○ 選択肢3
○ 選択肢4

[ボタン1] [ボタン2] [ボタン3]


選択肢1にチェックを入れてボタン1をクリックした場合、以下のリンク先に飛ぶ
リンク先:test01.html
 ⇒「ボタン1のvalue」+「選択肢1のvalue」+「.html」

以下、途中まで自分でつくったものをコメントに記載します

回答の条件
  • 1人5回まで
  • 登録:2010/03/16 18:51:39
  • 終了:2010/03/23 18:55:03

ベストアンサー

id:aside No.2

aside回答回数339ベストアンサー獲得回数312010/03/16 20:48:26

ポイント27pt
<form name="test" onsubmit="return false;">
<input name="link" type="radio" value="1">選択肢1
<input name="link" type="radio" value="2">選択肢2
<input name="link" type="radio" value="3">選択肢3
<input name="link" type="radio" value="4">選択肢4
<input name="ボタン1" type="image" src="botton1.gif" alt="ボタン1" width="101" value="test0" onclick="Answer('test0')">
<input name="ボタン2" type="image" src="botton2.gif" alt="ボタン2" width="101" value="test1" onclick="Answer('test1')">
<input name="ボタン3" type="image" src="botton3.gif" alt="ボタン3" 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>

その他の回答(3件)

id:hiroponta No.1

ぽこたん回答回数517ベストアンサー獲得回数262010/03/16 19:01:47

ポイント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

基本的に、最初のうちは、上記のようなサンプルを写す事をお勧めします。

id:aside No.2

aside回答回数339ベストアンサー獲得回数312010/03/16 20:48:26ここでベストアンサー

ポイント27pt
<form name="test" onsubmit="return false;">
<input name="link" type="radio" value="1">選択肢1
<input name="link" type="radio" value="2">選択肢2
<input name="link" type="radio" value="3">選択肢3
<input name="link" type="radio" value="4">選択肢4
<input name="ボタン1" type="image" src="botton1.gif" alt="ボタン1" width="101" value="test0" onclick="Answer('test0')">
<input name="ボタン2" type="image" src="botton2.gif" alt="ボタン2" width="101" value="test1" onclick="Answer('test1')">
<input name="ボタン3" type="image" src="botton3.gif" alt="ボタン3" 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>
id:Cherenkov No.3

Cherenkov回答回数1502ベストアンサー獲得回数4922010/03/16 21:10:55

ポイント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">選択肢1
<input name="link" type="radio" value="2">選択肢2
<input name="link" type="radio" value="3">選択肢3
<input name="link" type="radio" value="4">選択肢4
<div>
<input onclick="Answer(this)" name="ボタン1" type="image" src="botton1.gif" alt="ボタン1" width="101" value="test0">
<input onclick="Answer(this)" name="ボタン2" type="image" src="botton2.gif" alt="ボタン2" width="101" value="test1">
<input onclick="Answer(this)" name="ボタン3" type="image" src="botton3.gif" alt="ボタン3" 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
  • id:Ryo0524
    ソースです。

    <form name="test" onSubmit="return Answer();>
    <input name="link" type="radio" value="1">選択肢1
    <input name="link" type="radio" value="2">選択肢2
    <input name="link" type="radio" value="3">選択肢3
    <input name="link" type="radio" value="4">選択肢4
    <input name="ボタン1" type="image" src="botton1.gif" alt="ボタン1" width="101" value="test0">
    <input name="ボタン2" type="image" src="botton2.gif" alt="ボタン2" width="101" value="test1">
    <input name="ボタン3" type="image" src="botton3.gif" alt="ボタン3" 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>
  • id:Cherenkov
    <body>忘れてた。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません