ラジオボタンで背景色を変更する方法とページの移動

2023/08/08 06:43

このQ&Aのポイント

ラジオボタンで選択した背景色に変更する方法と、別のページに移動する方法について解説します。
JavaScriptを使用して、ラジオボタンの選択に応じて背景色を変更することができます。
また、別のページに移動する場合は、リンクを使用して目的のページに遷移すれば良いです。

ベストアンサー

ラジオボタンで選択変更

2008/10/19 11:36

ラジオボタンで選択した背景色に変更する方法はわかったのですが。。。「★ラジオボタン」で、「ページの移動」(別のページ)するには、どうしたらいいのでしょうか???(↓この方法でなくてもいいです。。。) <HTML> <HEAD> <TITLE></TITLE> </HEAD> <SCRIPT language="JavaScript">  </SCRIPT> <BODY> <CENTER> <FORM> <INPUT type="radio" name="bgradio" checked onClick="changeColor(0)">white <INPUT type="radio" name="bgradio" onClick="changeColor(1)">red <INPUT type="radio" name="bgradio" onClick="changeColor(2)">green <INPUT type="radio" name="bgradio" onClick="changeColor(3)">blue </FORM> </CENTER> </BODY> </HTML>

sakura5678
お礼率90% (67/74)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

noname#137826

2008/10/19 12:24 回答No.1

ラジオボタンを押した瞬間に移動してしまうのはあまりお行儀がよくないので、ボタンを1つつけてこんな感じでしょうか。 --- <html> <head> <script type="text/javascript"> function move() { for (var i = 0, n = document.f0.mv.length; i < n; i++) { if (document.f0.mv[i].checked) break; } window.location.href = 'http://' + document.f0.mv[i].value; } </script> </head> <body> <form name="f0"> <input type="radio" name="mv" value="www.google.co.jp" checked="checked">Google</input> <input type="radio" name="mv" value="www.yahoo.co.jp">Yahoo</input> <input type="radio" name="mv" value="www.goo.ne.jp">Goo</input> <input type="button" value="move" onclick="move()"/> </form> </body> </html>

質問者

お礼 2008/10/19 13:14

こんにちわ最初、コピペしたら、エラーが出てしまったのですが、どうも、?が自動的にくっついてましたので、修正したら動作しました。(^^)/ どうもありがとうございました。(^^v

関連するQ&A

ラジオボタンの値を・・・・・
<html> <head> <script language="javascript"> function osu(){ document.form1.text1.value=document.form1.radio1.value; } </script> </head> <body> <form name="form1"> <input type="radio" name="radio1" value="男" checked>男 <input type="radio" name="radio1" value="女">女 <input type="button" value="押す" onClick="osu()"> <input type="text" name="text1"> </form> </body> </html> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー上記のプログラムは、選択されたラジオボタンの値をテキストボックスに表示させるプログラムなんですが、何故かラジオボタンの値が表示されず、「undefined」というのが表示されます。どうすれば、「男」または「女」という値を表示させることができますか？ちなみにこれは、「○○○．ｈｔｍｌ」で保存します
- 締切済み
- JavaScript
ラジオボタンの値
プログラミング初心者です。ラジオボタンの値を数値として取得して、それを計算に活かしたいのですが、、、うまくいきません。radioChange()で数値を取得したのですが、calcでその変数を使うには以下でおかしいでしょうか？よろしくおねがいしますm(__)m <html> <body onload="radioChange()"> <SCRIPT LANGUAGE="JavaScript"> function radioChange(num) { xx = num.value; xx = parseInt(xx); } function calc() { radioChange(); document.write(xx * 100); } </SCRIPT> <form name="form1"> <input type="radio" name="radio1" value="1" onclick="radioChange(this)"> <input type="radio" name="radio1" value="2" onclick="radioChange(this)"> <input type="radio" name="radio1" value="3" onclick="radioChange(this)"> </form> </body> </html>
- ベストアンサー
- JavaScript
複数のラジオボタン選択肢によりsubmitを押せなくする
初めて質問させていただきます。ラジオボタンが下記の選択状態の時だけ「送信（submit）」ボタンを enable で表示させたいです。１：●　２：○ １：●　２：○ それ以外の選択肢では「送信（submit）」ボタンを disabl で押せないようにしたいです。調べて、近い動作にはなりましたが、javascriptに関して殆ど知識がないため、これから先がさっぱりわかりません。ぜひ教えを乞いたく参りました。お知恵をお貸しください<(__)> どうぞ宜しくお願い致します。 <HTML> <HEAD> <script type="text/javascript"> </script> <form> 1:<input type="radio" name="radio1" value="1" onClick="unlock1(this)"> 2:<input type="radio" name="radio1" value="2" onClick="unlock2(this)"><br> 1:<input type="radio" name="radio2" value="1" onClick="unlock1(this)"><br> 2:<input type="radio" name="radio2" value="2" onClick="unlock2(this)"><br> <input name="send" type="submit" value="送信" disabled > </form> </BODY> </HTML>
- ベストアンサー
- JavaScript
ラジオボタンのnameに別々の文字列を入れてもグループにするには？
ラジオボタンのnameに別々の文字列を入れてもグループにするには？前回こちらで、チェックボックスとラジオボタンの値を合計する方法を教えていただきました。これで、ラジオボタンのnameを任意の文字列にした場合、グループにならないので全部選択できてしまいます。 nameを商品名、valueを価格として使いたいので、任意のnameを使用かつ一つだけ選択させるにはどうしたらよいでしょうか。こちらの質問が正解に近いのかなと思いますが、どのように応用したらいいのかわかりません。http://okwave.jp/qa/q796874.html ご助言頂ければ幸いです。よろしくお願いいたします。 javascript(test_checked2.js)↓ function calc2() { var i = 0, f, frms = document.forms; var j, el, total = 0, num; while (f = frms[i++]) { j = 0; while (el = f.elements[j++]) { if (el.checked && (el.type == 'radio' || el.type == 'checkbox') && !isNaN(el.value)) total += 1 * el.value; } } num = total.toString(); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); document.getElementById('ch_all').innerHTML = '\\' + num; } html↓ <html> <head> <script type="text/javascript"> </script> <script type='text/javascript' src='test_checked2.js'></script> </head> <body> <div id="ch_all" style="background-color: #eeeeee;"> </div> <hr /> <form name="Tform1"> <input type="radio" name="test" value="34500" onclick="calc2()"> \34,500 <input type="radio" name="test" value="15000" onclick="calc2()"> \15,000 <input type="radio" name="test" value="3000" onclick="calc2()"> \3,000 <input type="radio" name="test" value="4444" onclick="calc2()"> \4,444 </form> <form name="Tform2"> <input type="checkbox" name="test2" value="34500" onclick="calc2()"> \34,500 <input type="checkbox" name="test2" value="15000" onclick="calc2()"> \15,000 <input type="checkbox" name="test3" value="3000" onclick="calc2()"> \3,000 <input type="checkbox" name="test4" value="4444" onclick="calc2()"> \4,444 </form> </body> </html>
- ベストアンサー
- JavaScript
ラジオボタンの選択項目によってコメントを表示する方法
ラジオボタンの「Yes・No」にチェックすると、チェックした項目別に欄外にコメントを表示するページを作成しました。初心者のため、Q1～Q15までcheckの方法を延々と書いたのですが、もっと簡単に書く方法はありますでしょうか？参考にQ1・Q2の分を掲載させていただきます。ぜひ、教えてください。よろしくお願いいたします。 <SCRIPT language="JavaScript">  </SCRIPT> <INPUT type="radio" name="q1"> Yes　<INPUT type="radio" name="q1"> No <INPUT size="41" type="text" name="q1com"> <INPUT type="radio" name="q2"> Yes　<INPUT type="radio" name="q2"> No <INPUT size="44" type="text" name="q2com"> <INPUT type="button" value="　診断ボタン " onclick="check();>
- ベストアンサー
- JavaScript
nameにハイフンを入れてラジオボタン未選択を判定したい
Javascriptにてひとつ問題が起こりました。 2つのラジオボタンがあり、どちらも選択せずに選択ボタンを押した時、「どちらかを選択して下さい」とメッセージが出るようにしたいです。 Javascriptは、nameにハイフンが入っていると動作しないようですが、nameにハイフンを入れて動作させなくてはならない状況です。（nameにハイフンを入れなければ動作するのですが・・・）私が調べたところ、下記のスクリプトでは、["SELECT-1"]や['SELECT-1']に変更しても動作しませんでした。下記のスクリプトを別の書き方に変更すれば可能なのかもわかりませんが、詳しくないので書けません。 nameにSELECT-1（途中にハイフンがあり、その後に数字が続きます）を使って可能な記述方法がございましたら、教えて下さい。下記のような記述ではなくても、nameがSELECT-1で動作するのであれば、変更しても構わないです。ご存知の方、教えて下さい！どうぞよろしくお願い致します。 <html> <head> <script language="javascript"> <!-- function choice(){ if((document.form1.SELECT-1[0].checked==false)&& (document.form1.SELECT-1[1].checked==false)) alert("どちらかを選択して下さい"); } </script> </head> <body> <form name="form1"> <input type="radio" name="SELECT-1" value="A">A <input type="radio" name="SELECT-1" value="B">B <input type="button" value="選択" onClick="choice()"> </form> </body> </html>
- ベストアンサー
- JavaScript
JavaScriptのラジオボタン選択で値取得
JavaScriptでフォームのラジオボタン選択で選択した項目に応じて、複数の変数に特定の数値を入れたいのですが、どうしたらいいでしょうか? ラジオボタンで仮に、・東京・大阪・名古屋という選択があったとして、 (そのボタンの下部に<input type="button" value="Go!" onclick="hogehoge();">というような実行ボタンがあったとします) 東京を選んだ場合は、 a = 4; b = 3; 大阪を選んだ場合は、 a = 3; b = 2; 名古屋を選んだ場合は、 a = 5; b = 4; と、a/bに数値を入れたいです。今現在下記のように書いたのですが、動作しません。 <script type="text/javascript"> function hogehoge() { no = document.hoge.a.value - 0; if(no == 1) { n1 = 4; n2 = 3; }else if(no == 2) { n1 = 3; n2 = 2; }else if(no == 3) { n1 = 5; n2 = 4; } document.hoge.no1.value = n1; document.hoge.no2.value = n2; } </script> <form name="hoge"> <input type="radio" name="a" value="1" checked>東京 <input type="radio" name="a" value="2">大阪 <input type="radio" name="a" value="3">名古屋 <br> <input type="button" value="Go!" onclick="hogehoge();"><br> <input type="text" size="5" name="no1"><br> <input type="text" size="5" name="no2"> </form> よろしくお願いいたします。
- ベストアンサー
- JavaScript
選択肢によってラジオボタンを押せなくする(無効にする)
2.7.2.の質問があって、ラジオボタンの選択肢(１～５まで）によって、１を選択したら、2.7.2.1のみ選択、その他はラジオボタン押せなくする、２を選択すると、2.7.2.2のみ選択、その他はラジオボタン押せなくする、３を選択すると、2.7.2.3のみ選択、その他はラジオボタン押せなくする４、５を選択すると、2.7.2.1、2.7.2.2、2.7.2.3、すべてを押せなくして、submitボタンを押して次へという処理をしたいのですが、下記のプログラムではまったく動作しません。どこが悪いのでしょうか？お分かりの方教えていただけませんか？ <script language="javascript">  </script> 以下省略
- 締切済み
- JavaScript
ラジオボタン
<html> <head> <title></title> <script type="text/javascript"> function check() { var s=0; if(document.forms["f2"].elements["stay"].checked) { var radios = document.forms["f2"].elements["aa"]; if(document.forms["f2"].elements["aa"].checked) s += 1800; if(document.forms["f2"].elements["aa"].checked) s += 2800; if(document.forms["f2"].elements["aa"].checked) s += 3800; if(document.forms["f2"].elements["aa"].checked) s += 2000; document.forms["f2"].elements["total"].value = s ; } } </script> </head> <body> <form name="f2" action="#"> <h4>Q1.テーマパークに入りますか？</h4> <p> <input type="checkbox" name="stay" value="">入場する </p> <h4>Q2.年齢は？</h4> <p> <input type="radio" name="aa" value="" checked>6歳未満 <input type="radio" name="aa">6歳以上18歳未満 <input type="radio" name="aa">18歳以上60歳未満 <input type="radio" name="aa">60歳以上 </p> <h4>入場料金は次の通りです。</h4> <p> <input type="button" value="計算" onclick="check();"> <input type="text" name="total" value="" size="18">円です。 </p> </form> </body> </html> これでやると何を選択しても0円になるんですけど、どうすればいいですか？
- ベストアンサー
- JavaScript
選択したたラジオボタンの値をSUBMITボタンに
選択したたラジオボタンの値をSUBMITボタンの名前として自動的に替えたいのですが、助言をいただけますか。イメージは下記です。★の部分に、クリックごとにradioの値を入れたいのです。 <script Language="JavaScript"> </script> <FORM ACTION="add.cgi" METHOD="POST" name="myFORM"> <INPUT TYPE="RADIO" NAME="Radio" VALUE="東京" onclick="set()" CHECKED> <INPUT TYPE="RADIO" NAME="Radio" VALUE="大阪"> <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="★"></form>
- ベストアンサー
- JavaScript

ラジオボタンで背景色を変更する方法とページの移動

ラジオボタンで選択変更

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

お礼 2008/10/19 13:14

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

ラジオボタンで背景色を変更する方法とページの移動

ラジオボタンで選択変更

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

お礼 2008/10/19 13:14

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

カテゴリ
一覧

専門家に質問してみよう
専門家登録