こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

ラジオボタンを他の物に変えても動作するようにしたい

ラジオボタンでチェックされた項目に合わせて用意されている文章が表示されるものです。
そのラジオボタンを<button>や<img>に変えることは可能なのでしょうか。

<!--メニュー-->
<div>
<form method="get" name="updateHTML">
<input type="radio" name="imageSize" value="00" onclick="return toggle();" checked />
No.01<br />
<input type="radio" name="imageSize" value="01" onclick="return toggle();" />
No.02<br />
<input type="radio" name="imageSize" value="02" onclick="return toggle();" />
No.03<br />
</form>
</div>

<!--表示文-->
<div id="html-00" style="display:inline;">
テキスト01
</div>
<div id="html-01" style="display:none;">
テキスト02
</div>
<div id="html-02" style="display:none;">
テキスト03
</div>


<!--スクリプト-->
<script type="text/javascript">
var options = new Array('00','01','02');
function toggle() {
var form = document.forms['updateHTML'];
var size = _getOption( form.imageSize );
var chosen = size;
for ( var i = 0; i < options.length; i++ ) {
var htmlId = 'html-'+ options[i];
var html = document.getElementById( htmlId );
if ( (html == null) ) {
continue;
}
if ( options[i] == chosen ) {
html.style.display = 'inline';
} else {
html.style.display = 'none';
}
}
return true;
}

function _getOption(radioObj) {
for ( counter = 0; counter < radioObj.length; counter++) {
if ( radioObj[counter].checked )
val = radioObj[counter].value;
}

radioObj.value = val;
return val;
}
</script>

投稿日時 - 2009-04-21 18:10:49

QNo.4897948

すぐに回答ほしいです

質問者が選んだベストアンサー

う~む…
もともとは、イメージのサイズ制御だったのか、セレクトのオプションボタンだったのか、なんだかいろんな経緯のありそうなスクリプトですねぇ…

それはさておき、対象を表示/非表示するだけでよいのなら、要素から表示したいdiv番号を直接呼び出すようにしてしまえば、呼び出し側の要素の種類は固定されずにすみます。
(極端な話、いろんな種類が混在していてもOK)

呼び出し方は onclik="change(n)" みたいな感じ(nは表示したい要素番号)

<サンプルです>
<html>
<head>
<script type="text/javascript">
var disp=[];
window.onload=function(){
disp=document.getElementById('disps').getElementsByTagName('DIV');
for (var i=1; i<disp.length; i++) disp[i].style.display='none';
}
function change(n){
for (var i=0; i<disp.length; i++) disp[i].style.display='none';
if (disp[n-1]) disp[n-1].style.display='inline';
}
</script>
</head>

<body>
◆ラジオボタンの例
<div>
<input type="radio" name="test" onclick="change(1)" checked />No.01<br />
<input type="radio" name="test" onclick="change(2)" />No.02<br />
<input type="radio" name="test" onclick="change(3)" />No.03
<p />
◆イメージの例
<div>
<button onclick="change(1)">No.01</button><br />
<button onclick="change(2)">No.02</button><br />
<button onclick="change(3)">No.03</button>
</div>
</div>
<p />
◆ボタンの例
<div>
<img src="A.jpg" onclick="change(1)" /><br />
<img src="B.jpg" onclick="change(2)" /><br />
<img src="C.jpg" onclick="change(3)" />
</div>

<hr>
<div id="disps">
<div>テキスト01</div>
<div>テキスト02</div>
<div>テキスト03</div>
</div>
</body>
</html>

注)
・id="disps"の中のdiv要素が表示対象の要素と解釈されます。
・一番初めは、最初の要素が表示された状態になります。
・もとの質問文が display=none/inline の切り替えになっていたのでそのままにしてあります。(divだからblockだろとかいいっこなしです)

投稿日時 - 2009-04-21 20:36:26

お礼

ありがとうございます!
自分が考えていた以上にシンプルなスクリプトで出来たのですね。
本当に助かりました!!

投稿日時 - 2009-04-22 11:07:21

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問