ラジオボタンの切替で表示する内容を変更

解決済

質問者：mapple55
質問日時：2007/05/17 00:18
回答数：1件

上部にラジオボタンが複数ある画面で
クリックしたタイトルに合わせた内容をその下に表示させたいのですが
どうにもやり方が思い浮かばないので力を貸して下さい。

ここで”内容”と言っているのは以下に示す動画を表示するブログツールのことで
(1)と(2)では別の動画が表示される設定のため、
ラジオボタンのonClickイベントか何かで値を取得し
以下のスクリプトを切り換えるのかなぁ、くらいはわかっても
具体的な方法がわかりません。
（ちなみにページの初期表示時には(1)を表示）
どなたか教えて頂けないでしょうか？
どうかお願いいたします。

(1)：<SCRIPT language="JavaScript" charset="utf-8" SRC="http://vachane.com/YouTube/tag/parts.php?size=l& … href="http://vachane.com/YouTube/blog_parts/index.php? … title="F1Tube：YouTubeの最新人気ランキング動画によるblogプラグイン（フリー）">F1Tube：無料動画ブログパーツFlash 【なんでもTube】</a></NOSCRIPT>

(2)：<SCRIPT language="JavaScript" charset="utf-8" SRC="http://vachane.com/YouTube/tag/parts.php?size=l& … href="http://vachane.com/YouTube/blog_parts/index.php? … title="driftTube：YouTubeの最新人気ランキング動画によるblogプラグイン（フリー）">driftTube：無料動画ブログパーツFlash 【なんでもTube】</a></NOSCRIPT>

通報する

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

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： yambejp
回答日時：2007/05/17 10:34

状況がよくわかりませんが、単に表示をきりかえるだけなら以下のような

やり方になると思います。

<html>
<head>
<style type="text/css">
#contents2,#contents3,#contents4{
display:none;
}
</style>
<script language=javascript>
function view(divId,divClass){
var divs=document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
if(divs[i].className==divClass){
if(divs[i].id==divId) divs[i].style.display="block";
else divs[i].style.display="none";
}
}
}
</script>
</head>
<body>
<form>
<input type="radio" name="category" id="category1" onClick="view('contents1','contensGroup')" checked><label for="category1">エリア１</label>
<input type="radio" name="category" id="category2" onClick="view('contents2','contensGroup')"><label for="category2">エリア２</label>
<input type="radio" name="category" id="category3" onClick="view('contents3','contensGroup')"><label for="category3">エリア３</label>
<input type="radio" name="category" id="category4" onClick="view('contents4','contensGroup')"><label for="category4">エリア４</label>
</form>
<div id="contents1" class="contensGroup">内容１</div>
<div id="contents2" class="contensGroup">内容２</div>
<div id="contents3" class="contensGroup">内容３</div>
<div id="contents4" class="contensGroup">内容４</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！おかげで出来ました！

実は貼り付けたjavascript部分が不完全だったため
実際に動かず何をやりたいのかも試せず意味不明だったかと思います。
それにも関わらずこんな良答頂けるとは...感謝です。

ちなみに以下のようにラジオボタンからセレクトボックスにも応用できました。
本当に使い勝手の良いスクリプトありがとうございました！！

<form name="frm">
<SELECT name="sel" onChange="view(document.frm.sel.value,'contensGroup')">
<OPTION value="contents1">選択肢1
<OPTION value="contents2">選択肢2
<OPTION value="contents3">選択肢3
<OPTION value="contents4">選択肢4
</SELECT>