• ベストアンサー

ラジオボタンと連動して文字列を挿入するjavascript(radioのvalue値を元に、特定の文字列を挿入です)

お世話になります。質問がわかりにくければすみません。 以下3つのラジオボタンがあり、value値と連動してテキストボックス(またはhidden)のvalueに特定の文字列を挿入させる方法を教えて下さい。 (例えば東京⇒関東、大阪⇒近畿、福岡⇒九州など…) <input type="radio" name="name1" value="1">東京<br> <input type="radio" name="name1" value="2">大阪<br> <input type="radio" name="name1" value="3">福岡<br> <input type="text" name="name2" value=""> <input type="hidden" name="name3" value=""> 宜しくお願いします。 また、参考になるようなサイトなどご教授頂ければ幸いです。 宜しくお願いします。

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

  • ベストアンサー
  • auty
  • ベストアンサー率58% (284/486)
回答No.2

ANo.1さんを書き直しただけになってしまいましたが、 -------------------------------------------------------------------- <html> <head> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>radio</title> <script type="text/javascript"> <!-- var city=['東京','大阪','福岡']; function setVal(index) { document.frm.name2.value=city[index-1]; document.frm.name3.value=city[index-1]; alert("hidden: "+document.frm.name3.value) } //--></script> </head> <body> <form name="frm"> <input type="radio" name="name1" value="1" onClick="setVal(this.value);" /> 東京 <br /> <input type="radio" name="name1" value="2" onClick="setVal(this.value);" /> 大阪 <br /> <input type="radio" name="name1" value="3" onClick="setVal(this.value);" /> 福岡 <hr /> <br /> <input type="text" name="name2" value="" /> <input type="hidden" name="name3" value="" /> </form> </body> </html>

nekusasu22
質問者

お礼

お礼が遅くなり失礼致しました。 非常にシンプルにできるのですね…。 ありがとうございました。

その他の回答 (1)

  • agricap
  • ベストアンサー率40% (79/195)
回答No.1

こんな感じでどうでしょうか? <input type="radio" name="name1" value="1" onClick="name2.value='東京'">東京<br> <input type="radio" name="name1" value="2" onClick="name2.value='大阪'">大阪<br> <input type="radio" name="name1" value="3" onClick="name2.value='福岡'">福岡<br>

関連するQ&A

  • 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> よろしくお願いいたします。

  • ラジオボタンとプルダウンを連動させたい

    ラジオボタンとプルダウンを連動させたい いつもお世話になっております。 ラジオボタンのvalue値に連動してプルダウンの内容が変わるということがしたいと思い、 数日前からいろいろと格闘していましたが、煮詰まったため相談に伺いました。 http://okwave.jp/qa/q2928590.htmlのANo.2の回答 -------------------------------------------------------------------- <script language="javascript"> function changeFunc(obj){ var v=obj.value; var f=obj.form; for(var i=0;i<f.length;i++){ if(f[i].type=="checkbox"){ if(f[i].className==v || v=="") f[i].disabled=false; else f[i].disabled=true; } } } </script> <form> <select name="genre" onChange="changeFunc(this)"> <option value="">食べ物</option> <option value="grain">穀物</option> <option value="fruit">果物</option> <option value="meat">生き物</option> </select> <br /> <input type="checkbox" value="お米" class="grain">お米<br /> <input type="checkbox" value="そば" class="grain">そば<br /> <input type="checkbox" value="りんご" class="fruit">りんご<br /> <input type="checkbox" value="みかん" class="fruit">みかん<br /> <input type="checkbox" value="さかな" class="meat">さかな<br /> <input type="checkbox" value="豚肉" class="meat">豚肉 </form> -------------------------------------------------------------------- を参考にいろいろと試してはみたのですが、こちらは「プルダウン→チェックボックス」で、 まったく逆でどうしたら良いのかまったくわかりませんでした。 他のウェブサイトの情報やサンプルも試したのですが、value値やname値他の問題でうまくできませんでした。 希望の仕様は ・ラジオボタンの選択肢によって、プルダウン(セレクトボックス)の内容が変わる(アイテムが消える、または選択できなくなる)。 ・ラジオボタン・プルダウン共にvalue値・name値は決まったものがある(プルダウンのvalue値は日本語) 以上です。 javascriptは素人ですので、わかりにくい質問になっているかもしれないのですが、お力を貸していただけましたら助かります。 よろしくお願いします。

  • ボタンとラジオボタンの連動

    「男性です」「女性です」のボタンを押すと、ラジオボタン「男性」「女性」がチェックされるページを作成しています。 ボタンとラジオボタンそれぞれのソースは、 <p><input type="submit" value="男性です" name="man"></p> <p><input type="radio" value="1" name="seibetsu"<?php if($man)<ここがわかりません>?>>男性 </p> を考えていますが、ボタンをクリックするとそれに対応したラジオボタンに勝手にチェックが入る連動のPHPソースの書き方がわかりません。 どなたかご教授ください。 よろしくお願いします。

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

    下のような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>

  • 携帯用アンケートページを作成したけど、携帯によってエラーがでてしまう。

    携帯用ページを作成したのですが、機種によりエラー(「ページが表示できません」か「Forriden」)がでてしまいます。全キャリア共通で使いたいのでおかしい部分がありましたら教えてください。よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><HTML><HEAD><meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"><meta http-equiv="Content-Style-Type" content="text/css"><TITLE>xxx</TITLE></HEAD> <BODY><form method="post" action="/cgi-bin/xxx.cgi"> <br>性別<br><input type="radio" name="rc_seibetu" value="男" checked>男<br><input type="radio" name="rc_seibetu" value="女">女<input name="cc_seibetu" type="hidden" value="性別"> <br>キャリア<br><input type="radio" name="rc_com" value="ドコモ" checked>ドコモ<br><input type="radio" name="rc_com" value="voda">voda<br><input type="radio" name="rc_com" value="au">au<br><input type="radio" name="rc_com" value="Tu-Ka">Tu-Ka<input name="cc_com" type="hidden" value="キャリア"> <br>機種<br><input name="oa_kisyu" type="text" value="例)xxx" size="14"><input name="cc_kisyu" type="hidden" value="機種"> <textarea name="oa_body">ご要望</textarea><input name="cc_body" type="hidden" value="ご要望"> <br><INPUT NAME="oa_mailtitle" TYPE="hidden" VALUE="xxx"><INPUT NAME="om_mailto" TYPE="hidden" VALUE="xxx@xxx.co.jp"><INPUT NAME="oh_page_confirm" TYPE="hidden" VALUE="cm_confirm"><INPUT NAME="oh_errpage_nodata" TYPE="hidden" VALUE="cm_nodata"><input type="submit" value="送信"><br></form></BODY>

    • 締切済み
    • CGI
  • JavaScriptのラジオボタンについてご質問させていただきます。

    JavaScriptのラジオボタンについてご質問させていただきます。 ラジオボタンに選択したメニューの合計カロリーを表示するというシステムを作っているのですが、私は初心者なため、行き詰まってしまいました。。 簡単なシステムで、ハンバーガー、サイドメニュー、ドリンクと3つの項目にそれぞれ2つ選択肢があって、最後に計算ボタンを押すと選んだメニューの合計カロリーが出るというものです。 私が作ったコードが以下になります。 <html> <head> <title>マックでカロリー</title> <script language="javascript"> a =document.formA.hamburger.value; b =document.formB.sidemenu.value; c =document.formC.drink.value; function calccalorie(){ calorie = "a + b + c"; return eval(calorie); } function writecalorie(){ document.write("あなたのマックでの摂取カロリーは" + calccalorie() + "kcalです!<br /><br />"); document.write("ちなみに、一日に必要なエネルギー量の目安は、20代男性で2650kcal、20代女性で2050kcalです。"); } </script> </head> <body> <fieldset> <p> <h2>ハンバーガー</h2><br /> <img src="hamburger.jpg" />   <img src="bigmac.jpg" /><br /> <form name="formA"> <input type="radio" name="hamburger" value="274" /> ハンバーガー     <input type="radio" name="hamburger" value="555" /> ビッグマック </form> </p> </fieldset> <fieldset> <p> <h2>サイドメニュー</h2>  <img src="frenchfries.jpg" />      <img src="shakashakachicken.jpg" /><br /> <form name="formB"> <input type="radio" name="sidemenu" value="454" /> マックフライポテト(M) <input type="radio" name="sidemenu" value="187" /> シャカシャカチキン </form> </p> </fieldset> <fieldset> <p> <h2>ドリンク</h2> <img src="cocacola.jpg" />  <img src="mcshake.jpg" /><br /> <form name="formC"> <input type="radio" name="drink" value="140" /> コカコーラ(M) <input type="radio" name="drink" value="321" /> マックシェイクバニラ(M) </form> </p> </fieldset> <form> <input type="button" name="btn1" value="何カロリー?" onClick="writecalorie()" /> </form> </body> </html> JavaScriptを勉強し始めて1週間ほどなので、すごく見当違いなことをしているかもわかりません^^; 何かアドバイス(参考ホームページでも)いただければ幸いです。 よろしくお願いいたします。

  • ラジオボタンの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;">&nbsp;</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>

  • ラジオボタンでうまくするには・・・・

    初めまして。 現在下記のプルダウン形式で、一つの価格が同じなので問題なく動くのですが <FORM action="cart/sys/cart.cgi" method="post"> <INPUT type=hidden value=005 name=num> <INPUT type=hidden value=●●● name=name> <INPUT type=hidden value=2000 name=tan> <SELECT name=sur> <OPTION value="" selected>購入数量</OPTION> <OPTION value=1>1</OPTION> <OPTION value=2>2</OPTION> <OPTION value=3>3</OPTION> <OPTION value=4>4</OPTION> <OPTION value=5>5</SELECT> <INPUT type=submit value=カートに入れる> </FORM><BR> <FORM action="・・・/cart.cgi" method="post"> <INPUT type=hidden value=005 name=num> <INPUT type=hidden value=●●● name=name> <INPUT type=hidden value=2000 name=tan> </FORM> 同じ商品で1・2・3・4・5のそれぞれに単価が変わる設定をしたいのですが、うまくいく方法が見つからないです。 ラジオボタン形式で作ってみたものの・・・・ <FORM action="・・・/cart.cgi" method="post"> <INPUT type=hidden value=005 name=num> <INPUT type=hidden value=●●● name=name> <INPUT type=submit value=カートに入れる> </FORM> <FORM> <INPUT type="radio" name="name1" value="2000">1袋<BR> <INPUT type="radio" name="name1" value="3900">2袋<BR> <INPUT type="radio" name="name1" value="5800">3袋<BR> <INPUT type="radio" name="name1" value="7500">4袋<BR> <INPUT type="radio" name="name1" value="8500">5袋</FORM> としてみましたがうまくいきません。 なにか方法ございましたら、ご教授いただければと思います。

    • ベストアンサー
    • HTML
  • JavaScript フォームでのラジオボタン制御

    JavaScript初心者です。 <input name="sample1" value="左ラジオボタン" checked="checked" type="radio"> 左ラジオボタン <input name="sample1" value="右ラジオボタン" type="radio">右ラジオボタン 右ラジオボタンをクリックした場合に下記のラジオボタンをクリックできる <input name="sample2" value="1" type="radio">1 <input name="sample2" value="2" type="radio">2 <input name="sample2" value="3" type="radio">3 <input name="sample2" value="4" type="radio">4 上記のように右ラジオボタンにチェックした時だけ1~4のラジオボタンをクリックできるように制御 したいのですがどのように書いて言ったらいいのか困っています。 $(function() { $("[name='sample1']").click(function(){ var num = $("[name='sample1']").index(this); if(num == 1){ $("[name='sample1']").attr("disabled", false); } else { $("[name='sample1']").attr("disabled", true); } }); }); 上記のようにしてみたのですがここからどう下のラジオボタンを操作させるようにしていったらいいのかわかりません。 詳しい方どなたかご教示頂けないでしょうか? 宜しくお願い致します。

  • radioボタンに応じてsubmitのvalue値を変えたい

    過去のレスも見たのですが、わからなかったので、 どうかお分かりになる方よろしくお願いいたします。 <input type="radio" name="kago" value="注文" checked>注文 <input type="radio" name="kago" value="見積">見積 と2つのラジオボタンがあります。 ラジオボタンの隣に、購入ボタンがあるのですが、 ラジオボタンの内容に応じて、このボタンの値を 注文→購入する 見積→見積する と変化させたいのです。 どうぞよろしくお願いいたします。

専門家に質問してみよう