ラジオボタンクリック時に、メニューの内容を変化させたいのですが、どうすればいいのでしょうか?
javascriptでやればいいのか、HTMLでやればいいのかわかりません。

また、メニューに触れたときにラジオボタンを切り替えるにはどうすればいいのでしょうか?
よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

これらの動作はJavaScriptを使用します。


まず、ラジオボタンをクリックしたときの動作ですが、
ラジオボタンにそれぞれ、関数を付けます。また関数には引数を当てておきます。
<INPUT TYPE="radio" NAME="radio" VALUE="radio1" onClick="ChangeMenu(1)">ラジオ1
<INPUT TYPE="radio" NAME="radio" VALUE="radio2" onClick="ChangeMenu(2)">ラジオ2




JavaScriptの方では関数を組みます。ここには変化させたいメニューの項目と、その値を書いておきます。これらの項目は元のメニューの数と同じでなければなりません。
function ChangeMenu(a){
with(document.form1){
if(a == 1){
OP.options[0].text="メニュー選択";
OP.options[1].text="ラジオ1-a";
OP.options[2].text="ラジオ1-b";
OP.options[0].value="";
OP.options[1].value="radio1-a";
OP.options[2].value="radio1-b";
}else if(a == 2){
OP.options[0].text="メニュー選択";
OP.options[1].text="ラジオ2-a";
OP.options[2].text="ラジオ2-b";
OP.options[0].value="";
OP.options[1].value="radio2-a";
OP.options[2].value="radio2-b";
}else{



}
}
}

これをいくつも組み合わせれば、どんどん変化する数は増えていきます。また、項目や値を配列に格納して、ループで呼び出してやるとソースが見やすくなります。

メニューに触れたときにラジオボタンを切り替える方法は
<OPTION onChange="ChangeRadio()" NAME="OP">
とし、メニューそれぞれの値を関数の引数とします。

function ChangeRadio(){
var value=document.form1.OP.selectedIndex;
value=document.orm1.OP.options[vakue].value;
if(value == "radio1-a"){
document.form1.radio[0].click();
}else if(value == "radio2-a"){
document.form1.radio[1].click();
}else{



}
}

こんな感じです。
    • good
    • 0
この回答へのお礼

迅速で詳しい回答、ありがとうございます。
メニューに触れたときラジオボタンを操作するのは、
これでできそうです。

ラジオボタンクリック時のほうについては、
こちらのたずね方が悪かった為、誤解を招いてしまったようです。

ラジオボタンクリック時、メニューの『現在表示されている内容』を
他の値にかえるだけでいいです。

たとえば、
項目が
<OPTION VALUE="">24
<OPTION VALUE="">25
<OPTION VALUE="">26
<OPTION VALUE="">27
<OPTION VALUE="">28
<OPTION VALUE="">29
<OPTION VALUE="">30
とあり、現在28が選択されていて、ラジオボタンを押したら
24が表示される(初期選択に戻る)、
というようにしたいです。

それでも、メニューに触れたときのやつは
大変助かりました。
本当にありがとうございました。

お礼日時:2001/06/29 11:55

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Qラジオボタンによる有効なボタンの切り替えについて

はじめまして。
下記のような機能を実装したいと思っています。
どなたか教えていただけませんでしょうか?

<html>
<head>
<title>サンプル</title>
</head>

<input type="radio" name="radio1" value="a">A
<input type="radio" name="radio1" value="b">B
<input type="radio" name="radio1" value="c">C
<input type="radio" name="radio1" value="x">全部ダメ
<br><br>

<input type="button" value="Aボタン">
<input type="button" value="Bボタン">
<input type="button" value="Cボタン">

</body>
</html>

ラジオの「A」を選択すると「Aボタン」のみ有効で他は無効(disabled)になり
「B」を選択すると「Bボタン」のみ有効というように、
選択したラジオボタンの値と有効なボタンを連動させたいのです。
さらに、ラジオの「全部ダメ」を選択すると全てのボタンを無効としたいです。

ラジオボタンの値の取得のjavascriptなど個々の機能について調べてみたりしたのですが
どのように組み合わせれば、機能を実現できるのかわかりませんでした。

お手数ですが、ご教示いただけますでしょうか。。
可能ならばソースのサンプルをいただけるとありがたいのですが。
どうぞよろしくお願いいたします。

はじめまして。
下記のような機能を実装したいと思っています。
どなたか教えていただけませんでしょうか?

<html>
<head>
<title>サンプル</title>
</head>

<input type="radio" name="radio1" value="a">A
<input type="radio" name="radio1" value="b">B
<input type="radio" name="radio1" value="c">C
<input type="radio" name="radio1" value="x">全部ダメ
<br><br>

<input type="button" value="Aボタン">
<input type="button" value="Bボタン">
<input type="button" value="Cボタン">

</body>
</ht...続きを読む

Aベストアンサー

こんにちは。

こんな感じでどうでしょうか。
もうちょっと工夫すれば汎用性を持たせることが出来ますがこんな方法がありますということで。
他にもいろいろ書き方がありますのでその辺は応用利かせてみてください。

動きの説明
1.HTMLの属性で全てボタンをdisable
2.ラジオがクリックされた際にsetButtonへdisableを解除するボタンの名称を渡す
3.一度全てのボタンをdisableする(リセットの意)
4.2で渡されたボタンのみdisableをfalse(その前の条件はetButtonに値が来なかったとき=全てダメ)

<html>
<head>
<title>TEST</title>
<script type="text/javascript">
<!--
function setButton ( value ) {
frmTest['btnA'].disabled = true;
frmTest['btnB'].disabled = true;
frmTest['btnC'].disabled = true;
if ( value != undefined )
frmTest[value].disabled = false;
}
//-->
</script>
</head>
<body>
<form name="frmTest">
<input type="radio" name="radio1" value="a" onclick="setButton('btnA');">A
<input type="radio" name="radio1" value="b" onclick="setButton('btnB');">B
<input type="radio" name="radio1" value="c" onclick="setButton('btnC');">C
<input type="radio" name="radio1" value="x" onclick="setButton();">全部ダメ
<br><br>
<input type="button" value="Aボタン" name="btnA" disabled>
<input type="button" value="Bボタン" name="btnB" disabled>
<input type="button" value="Cボタン" name="btnC" disabled>
</form>
</body>
</html>

こんにちは。

こんな感じでどうでしょうか。
もうちょっと工夫すれば汎用性を持たせることが出来ますがこんな方法がありますということで。
他にもいろいろ書き方がありますのでその辺は応用利かせてみてください。

動きの説明
1.HTMLの属性で全てボタンをdisable
2.ラジオがクリックされた際にsetButtonへdisableを解除するボタンの名称を渡す
3.一度全てのボタンをdisableする(リセットの意)
4.2で渡されたボタンのみdisableをfalse(その前の条件はetButtonに値が来なかったとき=全てダメ)

<html>
<head>
<ti...続きを読む

Qラジオボタンを選択すると、他のラジオボタンの動きを制御したい

radio1~radio3のいずれか「はい」を選択すると、
その他が強制的に「いいえ」に切り替わるスクリプトはどのように作成すればよろしいでしょうか?

<INPUT TYPE=radio NAME="radio1" VALUE="1">はい
<INPUT TYPE=radio NAME="radio1" VALUE="2">いいえ

<INPUT TYPE=radio NAME="radio2" VALUE="1">はい
<INPUT TYPE=radio NAME="radio2" VALUE="2">いいえ

<INPUT TYPE=radio NAME="radio3" VALUE="1">はい
<INPUT TYPE=radio NAME="radio3" VALUE="2">いいえ

Aベストアンサー

寝ぼけてた。
<form>
<p>
<input type="radio" name="radio1" value="1" class="gp0">はい
<input type="radio" name="radio1" value="2" class="gp0" checked>いいえ
</p>
<p>
<input type="radio" name="radio2" value="1" class="gp0">はい
<input type="radio" name="radio2" value="2" class="gp0" checked>いいえ
</p>
<p>
<input type="radio" name="radio3" value="1" class="gp0">はい
<input type="radio" name="radio3" value="2" class="gp0" checked>いいえ
</p>
</form>


<script type="text/javascript">
//@cc_on
var grp = 'gp0';
var reg = new RegExp('\\b' + grp + '\\b');
var elms = document.getElementsByTagName('input');
var o, objs = [], cnt = 0;
while (o = elms[cnt++]) if (o.className && o.className.match(reg)) objs.push(o);

document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click',
function (evt) {
var c = 0;
var e = evt./*@if (1) srcElement @else@*/ target /*@end@*/;

if (!(e.tagName == 'INPUT' && e.type == 'radio')) return;
if (!(e.className && e.className.match(reg))) return;

if (e.value == '1') {
while (o = objs[c++]) o.checked = o.value == '2';
e.checked = true;
}
}
, false);

</script>
でどうでしょう?

寝ぼけてた。
<form>
<p>
<input type="radio" name="radio1" value="1" class="gp0">はい
<input type="radio" name="radio1" value="2" class="gp0" checked>いいえ
</p>
<p>
<input type="radio" name="radio2" value="1" class="gp0">はい
<input type="radio" name="radio2" value="2" class="gp0" checked>いいえ
</p>
<p>
<input type="radio" name="radio3" value="1" class="gp0">はい
<input type="radio" name="radio3" value="2" class="gp0" checked>いいえ
</p>
</form>


<script...続きを読む

Qラジオボタン選択で「複数ラジオボタン」をアクティブにするには?

■下記サンプルソースのラジオボタンの「はい」を選択すると複数のラジオボタンがアクティブになるJavaScriptがわからず困っております。教えて頂けないでしょうか。
(ページ開いた際は「いいえ checked」で複数ラジオボタンはグレーで選択無効)

用途はアンケートフォームです。

可能であればシンプルなソースで「最新のWinIE、MacSafari」に対応していると非常に助かります。先輩方よろしくお願いします。


<form name="form2" method="post" action="">
<table>
<tr>
<td>■「はい」を選択すると、ラジオボタン(カテゴリー1~4)がアクティブになる。
</td>
</tr>
<tr>
<td>
<input name="radiobutton" type="radio" value="radiobutton">はい
<input name="radiobutton" type="radio" value="radiobutton" checked>いいえ
</td>
</tr>
<tr>
<td>
<input name="radiobutton" type="radio" value="radiobutton">カテゴリー1
<input name="radiobutton" type="radio" value="radiobutton">カテゴリー2
<input name="radiobutton" type="radio" value="radiobutton">カテゴリー3
<input name="radiobutton" type="radio" value="radiobutton">カテゴリー4
</td>
</tr>
</table>
</form>

■下記サンプルソースのラジオボタンの「はい」を選択すると複数のラジオボタンがアクティブになるJavaScriptがわからず困っております。教えて頂けないでしょうか。
(ページ開いた際は「いいえ checked」で複数ラジオボタンはグレーで選択無効)

用途はアンケートフォームです。

可能であればシンプルなソースで「最新のWinIE、MacSafari」に対応していると非常に助かります。先輩方よろしくお願いします。


<form name="form2" method="post" action="">
<table>
<tr>
<td>■「はい」を選択すると...続きを読む

Aベストアンサー

カテゴリーが違うのに同じ名前を使うと使い勝手が悪いです
#1さんのようにわけてかくといいですね。
こんな感じで、オブジェクトを引数で渡すと比較的
ローレベルのjavascriptで動作します。

<script language="javascript">
function changeRadio(num1,num2){
var f=num1.form
for(var i=0;i<f.length;i++){
if (f.elements[i].name==num2) f.elements[i].disabled=((num1.value=="yes")?false:true)
}
}
</script>
<form name="form2" method="post" action="">
<table>
<tr>
<td>■「はい」を選択すると、ラジオボタン(カテゴリー1~4)がアクティブになる。
</td>
</tr>
<tr>
<td>
<input name="radioSelect" type="radio" value="yes" onclick="changeRadio(this,'radiocategory')">はい
<input name="radioSelect" type="radio" value="no" checked onclick="changeRadio(this,'radiocategory')">いいえ
</td>
</tr>
<tr>
<td>
<input name="radiocategory" type="radio" value="category1" disabled>カテゴリー1
<input name="radiocategory" type="radio" value="category2" disabled>カテゴリー2
<input name="radiocategory" type="radio" value="category3" disabled>カテゴリー3
<input name="radiocategory" type="radio" value="category4" disabled>カテゴリー4
</td>
</tr>
</table>
</form>

カテゴリーが違うのに同じ名前を使うと使い勝手が悪いです
#1さんのようにわけてかくといいですね。
こんな感じで、オブジェクトを引数で渡すと比較的
ローレベルのjavascriptで動作します。

<script language="javascript">
function changeRadio(num1,num2){
var f=num1.form
for(var i=0;i<f.length;i++){
if (f.elements[i].name==num2) f.elements[i].disabled=((num1.value=="yes")?false:true)
}
}
</script>
<form name="form2" method="post" action="">
<table>
<tr>
<td>■「はい」...続きを読む

Qjavascript ラジオボタン

javascriptのことで質問させてください。
よろしくおねがいします。

簡単なフォームをテーブルで作成しています。
例えばの例でお願いします。

<form action="" method="post">
<table>
<tr>
<td>表示/非表示<td>
<td><input type="radio" value="1">非表示 <input type="radio" value="2">表示<td>
<tr>

<!--ここから表示/非表示部分-->
<tr>
<td>テキスト<td>
<td><input type="text"><td>
<tr>
<!--ここまで表示/非表示部分-->

</table>
</form>
上記のようなフォームがあったとします。

PHPを使用していまして、
『hoge.html?str=値』 がアドレスとします。
$str=$_GET['str'];

$str=1 の時は、はじめは表示
$str=2 の時は、はじめは非表示
$str="" の時は、はじめは非表示

という感じの内容でラジオボタン選択すると表示/非表示されると言うものを作成したいと思っています。

説明がわかりにくいと思いますがどうぞよろしくお願いします。

javascriptのことで質問させてください。
よろしくおねがいします。

簡単なフォームをテーブルで作成しています。
例えばの例でお願いします。

<form action="" method="post">
<table>
<tr>
<td>表示/非表示<td>
<td><input type="radio" value="1">非表示 <input type="radio" value="2">表示<td>
<tr>

<!--ここから表示/非表示部分-->
<tr>
<td>テキスト<td>
<td><input type="text"><td>
<tr>
<!--ここまで表示/非表示部分-->

</table>
</form>
上記のようなフォームがあったとします。

PHPを使用してい...続きを読む

Aベストアンサー

こんにちは。


以下のような感じではどうでしょうか。
(表示非表示の値がradioの値と差異があったので勝手にあわせてしまいました)
phpの$strは$_GET['str']の値で、""の場合は2にしています。


==== script部分
<script type="text/javascript">
window.onload = function() {
var disp = document.getElementsByName('disp');
setDisp ( '<?= $str ?>' );
for ( var i = 0; i < disp.length; i ++ ) {
disp[i].onclick = function() {
setDisp ( this.value );
};
}
};
function setDisp ( value ) {
document.getElementById('area').style.display =
value === '2' ? 'none' : 'block';
}
</script>

==== html部分
<table>
<tr>
<td>表示/非表示<td>
<td><input name="disp" type="radio" value="2"<?= $str === '2' ? ' checked="checked"' : '' ?>>非表示 <input name="disp" type="radio" value="1"<?= $str === '1' ? ' checked="checked"' : '' ?>>表示<td>
<tr>
<!--ここから表示/非表示部分-->
<tr id="area">
<td>テキスト<td>
<td><input type="text"><td>
<tr>
<!--ここまで表示/非表示部分-->
</table>

こんにちは。


以下のような感じではどうでしょうか。
(表示非表示の値がradioの値と差異があったので勝手にあわせてしまいました)
phpの$strは$_GET['str']の値で、""の場合は2にしています。


==== script部分
<script type="text/javascript">
window.onload = function() {
var disp = document.getElementsByName('disp');
setDisp ( '<?= $str ?>' );
for ( var i = 0; i < disp.length; i ++ ) {
disp[i].onclick = function() {
setDisp ( this.value );
};
}
};
function setDisp ( value ) {
document...続きを読む

Q【JavaScript】ラジオボタンにより、formのaction内容

【JavaScript】ラジオボタンにより、formのaction内容を変更したいのですが・・・。

どのラジオボタン(ここでは『A』と『B』とします)をチェックされたかにより、

<form action="(ここの部分)">

(ここの部分)と書かれたformのactionの内容を変えたいのです。

例)
『A』のラジオボタンをチェック → <form action="a.php">になる
『B』のラジオボタンをチェック → <form action="b.php">になる

このようにしたいのです。

どうかよろしくお願いします。

Aベストアンサー

function gamenchange(){
if (document.myform.radio01.value=="1"){
document.myform.action="a.php";
}else{
document.myform.action="b.php";
}
document.myform.submit();
}

----------------------

<form action="#" method="post">
<input type="radio" name="radio01" value="1">ラジオボタンA
<input type="radio" name="radio01" value="2">ラジオボタンB
<input type="submit" onclick="gamenchange()">
</form>

----------------------

submitボタンを押したときにfunctionでaction先をセットする・・・のはいかがでしょう?


人気Q&Aランキング

おすすめ情報