人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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


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

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

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

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


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

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

●質問者: Ryo0524
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:HTML JavaScript クリック コメント ボタン
○ 状態 :終了
└ 回答数 : 3/4件

▽最新の回答へ

1 ● ぽこたん
●27ポイント

ラジオボタン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

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


2 ● aside
●27ポイント ベストアンサー
<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 ● Cherenkov
●26ポイント

あんまり変わりませんが折角作ったので・・・。

回答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>
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ