ラジオボタンを選択してテキストに数字を入力する方法

このQ&Aのポイント
  • ラジオボタンを選択したら、テキスト欄に数字を入力する方法を知りたい。
  • 参考になる方法は見つかったが、ラジオボタンの選択値に応じてテキスト欄への入力を制御する方法を見つけられなかった。
  • 質問に対する回答やコード例があれば、教えていただけると助かります。
回答を見る
  • ベストアンサー

ラジオボタンを選択したらテキストに数字入力

ラジオボタンを選択してvalueが1だったら、テキスト欄(Q1_TEXT)に0を入力し、それ以外だったら何もしない、というJavascriptを書きたいです。ラジオボタンによって、テキスト欄の有効化、無効化に関する書き方は見つけられたのですが、このような挙動について見つけることができませんでした。 ご存じの方がおられましたらご教示いただけますと助かります。 よろしくお願いいたします。 <body> <form> <INPUT type="radio" name="Q1" value="1"> <INPUT type="radio" name="Q1" value="2"> <INPUT type="radio" name="Q1" value="3"> <INPUT type="text" name="Q1_TEXT" value="_Q1_TEXT_CHK_" SIZE="7"> </form> </body>

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

横からですが… onchangeイベントの発生のしかたがブラウザによって若干異なるみたいですね。 それなので、onchangeをonclickにすれば、この場合は結果的に同じなので目的を達せられるのでは? でも、一度value=1のボタンを選択した後に、他のボタンを選択してもQ1_TEXTの値は「0」のままで良いのでしょうか? (ご質問文からはそのように読めますが…)

kujitan
質問者

お礼

ありがとうございます! 無事動きました。他のボタンもvalue='0'の部分を変更して「0」を消すように素人考えで設定してみましたら正しく動きました 大変ありがとうございました。助かりました。

その他の回答 (1)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

<form> <INPUT type="radio" name="Q1" value="1" onchange="this.form.elements['Q1_TEXT'].value='0'"> <INPUT type="radio" name="Q1" value="2"> <INPUT type="radio" name="Q1" value="3"> <INPUT type="text" name="Q1_TEXT" value="_Q1_TEXT_CHK_" SIZE="7"> </form> 単純に、valueが1のinputタグにonchangeメソッドを指定してやれば?

kujitan
質問者

お礼

早速にご回答いただきましてありがとうございます! 作成してみたところ、0が入るタイミングが想定していたものと違ってしまいました。 ラジオボタンをチェックしたときではなく、チェック後何かイベントを起こさないと(別のラジオボタンをチェックする、テキスト欄にフォーカスするなど)onchangeが効きません。。 何か対処法はありますでしょうか。よろしければ引き続きご教示いただけますと大変助かります。

関連する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」というのが表示されます。 どうすれば、「男」または「女」という値を表示させることができますか? ちなみにこれは、「○○○.html」で保存します

  • ラジオボタンの選択で解答・点数を表示する

    10問のテストを作成しています。 (1)選択肢はラジオボタンで3択(正解は10点、その他0点) (2)採点をクリックすると、テキストボックスに○×の結果を出し、もう一つ別のテキストボックスに×の場合は正しし解答を表示 (3)アラートで「あなたの点数は~~点」と出す (4)FORM1.2のSCOREに点数を表示 以上のようにしたいと思い、下記のように作りました。 まだ初心者のため、長々と同じことを書くことしか分からないので、もっと簡単にまとめられる方法がありましたら、教えてください。 よろしくお願いいたします。 function dispscore() { var score=0; if (document.form1.q0[0].checked) { score += 10; document.form1.r0.value = "○"; } else{ document.form1.r0.value = "×"; document.form1.a0.value = "ナイル川"; } if (document.form1.q1[2].checked) { score += 10; document.form1.r1.value = "○"; } else{ document.form1.r1.value = "×"; document.form1.a1.value = "バチカン市国"; } alert("点数は " + score + " 点 です "); document.form1.score.value=score document.form2.score.value=score } ------------------------------------------------------------ <INPUT type=radio name="q1" value="10">ナイル川 <INPUT type=radio name="q1" value="0">ミシシッピー川 <INPUT type=radio name="q1 value="0">アマゾン川> <INPUT size="3" name="r1" type="text"> <INPUT size="25" name="a1" type="text"> <INPUT type=radio name="q2" value="0">バルカン市国 <INPUT type=radio name="q2" value="0">バルタン市国 <INPUT type=radio name="q2" value="10">バチカン市国 <INPUT size="3" name="r2" type="text"> <INPUT size="25" name="a2" type="text">

  • 複数のラジオボタンの中から1つを選択すると、その行の5つのチェックボッ

    複数のラジオボタンの中から1つを選択すると、その行の5つのチェックボックスが有効になる方法を教えていただけないでしょうか。 1つのラジオボタンでならなんとか出来たのですが、 複数になるとどうもうまくいきません。 検索してはみたのですが、これといったものがなく質問することにしました。 以下のソースは単発で動いた時のものです。 <html> <head> <script type="text/javascript"> function checkfunc() { for(i=0; i<5; i++) { document.myform.chk1[i].disabled = !(document.myform.yesno.checked); } } </script> </head> <body onLoad="checkfunc();"> <form name="myform"> <input type="radio" name="yesno" value="1" onClick="checkfunc();">ラジオボタン <input type="checkbox" name="chk1" value="0">チェックボックス0 <input type="checkbox" name="chk1" value="1">チェックボックス1 <input type="checkbox" name="chk1" value="2">チェックボックス2 <input type="checkbox" name="chk1" value="3">チェックボックス3 <input type="checkbox" name="chk1" value="4">チェックボックス4 </form> </body> </html> 希望のイメージとしてはこんな感じです↓ ○ラジオボタン □チェックボックス □チェックボックス □チェックボックス □チェックボックス □チェックボックス ◎ラジオボタン □チェックボックス □チェックボックス □チェックボックス □チェックボックス □チェックボックス ○ラジオボタン □チェックボックス □チェックボックス □チェックボックス □チェックボックス □チェックボックス 申し訳ないのですが、どなたか教えていただけないでしょうか。

  • 特定のラジオボタンが選択されたらテキストフィールドを入力可

    下のような6つのラジオボタンと1つのテキストフィールドのあるフォームがあります。 「あ・い・う・え・お」のラジオボタンが選択されたらテキストフィールドをdisabledに、「か」なら入力可能にしたくて、JavaScriptで次のように記述しました。 一応動作しているように見えるのですが、見よう見まねで書いた初めてJavaScriptなので大丈夫なのか不安です。これで良いのでしょうか。 function txtClose () { if (document.f_frm.motive[5].checked) { document.f_frm.motive_add.disabled = false; } else { document.f_frm.motive_add.disabled = true; } } <form name="f_frm"> <input type="radio" name="motive" value="あ" onclick="txtClose();" />あ<br /> <input type="radio" name="motive" value="い" onclick="txtClose();" />い<br /> <input type="radio" name="motive" value="う" onclick="txtClose();" />う<br /> <input type="radio" name="motive" value="え" onclick="txtClose();" />え<br /> <input type="radio" name="motive" value="お" onclick="txtClose();" />お<br /> <input type="radio" name="motive" value="か" onclick="txtClose();" />か<br /> <input type="text" name="motive_add" size="20" maxlength="40" onclick="txtClose();" /> </form>

  • 複数のラジオボタン選択肢によりsubmitを押せなくする

    初めて質問させていただきます。 ラジオボタンが下記の選択状態の時だけ「送信(submit)」ボタンを enable で表示させたいです。 1:● 2:○ 1:● 2:○ それ以外の選択肢では「送信(submit)」ボタンを disabl で押せないようにしたいです。 調べて、近い動作にはなりましたが、javascriptに関して 殆ど知識がないため、これから先がさっぱりわかりません。 ぜひ教えを乞いたく参りました。お知恵をお貸しください<(__)> どうぞ宜しくお願い致します。 <HTML> <HEAD> <script type="text/javascript"><!-- function unlock1(el){el.form.send.disabled=false;} function unlock2(el){el.form.send.disabled=true;} //--> </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>

  • ラジオボタンの選択項目によってコメントを表示する方法

    ラジオボタンの「Yes・No」にチェックすると、チェックした項目別に欄外にコメントを表示するページを作成しました。 初心者のため、Q1~Q15までcheckの方法を延々と書いたのですが、もっと簡単に書く方法はありますでしょうか? 参考にQ1・Q2の分を掲載させていただきます。 ぜひ、教えてください。よろしくお願いいたします。 <SCRIPT language="JavaScript"> <!-- function check(){ if (document.form1.q1[0].checked){ document.form1.q1com.value="減量しましょう"; } if (document.form1.q1[1].checked){ document.form1.q1com.value="引き続き注意を"; } if (document.form1.q2[0].checked){ document.form1.q2com.value="再検査を受けましょう!"; } if (document.form1.q2[1].checked){ document.form1.q2com.value="チェックしましょう"; } // --> </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がわからず困っております。教えて頂けないでしょうか。 (ページ開いた際は「いいえ 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 radioボタンの制御

    お世話になります。 javascript初心者です。 下記のようなケース input のnamaが異なる場合において radioボタンを使用してどちらかを選択させたいのですが 通常のhtmlだと両方に選択が入ってしまうので困っております。 javascriptでひとつだけを選択させることが可能と聞きましたが、 どのようにしたらよいか見当がつかなかったため質問させていただきました。 どうぞよろしくお願いいたします。 <html> <body> <form> <input type="radio" name="flgMale" value="1">男 <input type="radio" name="flgFemale" value="1">女 </form> </body> </html>

  • このラジオボタンをチェックした場合、以下の任意のラジオボタンの入力を禁止(disabale)にしたい。

    つまずいております。 ラジオボタンのタグにonClick=""でスクリプトを記述するとチェックそのものができなくなってしまいます。 ラジオボタンをチェックしたときに瞬時に以下のラジオボタンを選択不可能にする場合はどのようにしたらいいのでしょうか? <!--head内のスクリプト部分--> <script type="text/javascript" language="JavaScript"> <!-- function f0bj(){ document.form1.namae2.disabled; } // --> </script> <body> <input name="namae1" type="radio" onClick="fobj()" value="任意の名前1">任意の名前1 <input name="namae2" type="radio" value="任意の名前2">任意の名前2 </body>

  • 未入力のラジオボタンに、alertを表示したい。

    過去問を見て、応用しようとしましたがうまくゆきません。 超初心者ですので・・・ すいません、質問させてください。 WinXP、IE6を使っています。 下記のソースコード(簡略化しています)で、未入力の場合テキストではalertが表示されるのですが、ラジオボタンでは表示されません。 どう記述すれば表示されるのでしょうか? お分かりの方、教えてください。 よろしくお願いします。 <html> <head> <title>お申し込み</title> <script language="JavaScript"> <!-- function checkSubmit() { if (document.form1.Name.value == "") { alert("お名前をご入力ください!"); return false; } if (confirm("この内容で送信します。\nよろしいですか?") == false) { return false; } return true; } //--> </script> </head> <form name="form1" method="post" action="http://www.000/" onSubmit="return checkSubmit()"> お名前:<input type="text" name="Name" size="20"> 男性<input type="radio" name="Seibetu" value="Man"> 女性<input type="radio" name="Seibetu" value="Woman"> <input type="submit" value="お申し込み"> </form> </body> </html>

専門家に質問してみよう