ラジオボタンの値を数値として取得し計算に活かしたい

このQ&Aのポイント
  • プログラミング初心者です。ラジオボタンの値を数値として取得して、それを計算に活かしたいのですが、うまくいきません。
  • JavaScriptのradioChange()関数を使ってラジオボタンの値を取得し、その値を計算に利用したいです。
  • radioChange()関数で数値を取得した後、calc()関数でその変数を使いたいですが、正常に動作していません。
回答を見る
  • ベストアンサー

ラジオボタンの値

プログラミング初心者です。ラジオボタンの値を数値として取得して、それを計算に活かしたいのですが、、、うまくいきません。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>

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

  • ベストアンサー
  • hkd9001
  • ベストアンサー率48% (99/204)
回答No.2

こんばんは。 私の勝手な解釈だけど、以下のようにすると、ラジオボタンで指定した値が alert で表示されます。document.write を使うと、もとあったラジオボタンなんかが消えてしまうので。 ---------------------------------------- <body onload="radioChange()"> <SCRIPT LANGUAGE="JavaScript"> function radioChange(num) { xx = num.value; document.form1.xyz.value = parseInt(xx); } function calc() { xx = document.form1.xyz.value; alert(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)"> <input type="hidden" name="xyz"> <input type="button" value="計算" onClick="calc();"> </form> </body> </html> ---------------------------------------- ようするに、ラジオボタンから得た値を、いったん <input type="hidden" name="xyz"> に退避させて、あらためて calc() で呼び出すという段取りです。 あと、質問者さんの書いてくださったコードだと、この calc() が実行されないので、 <input type="button" value="計算" onClick="calc();"> というボタンを設け、これをクリックしてもらうことにより起動するようにしました。 …もしお答えになっていなかったら、ごめんなさい。

ukurere84
質問者

お礼

回答ありがとうございます。 hkd9001のおっしゃることを、まずやってみようと思います。

その他の回答 (2)

  • leap_day
  • ベストアンサー率60% (338/561)
回答No.3

こんにちは ラジオボタンを押したら value="1"だったら 『100』 value="2"だったら 『200』 という風にしたいのですよね? こんな感じで・・・ <script language="javascript"> <!-- function calc(Num) { /*テキストエリアに表記 document.form.txt.value = Num*100; /*divにHTML表記*/ num.innerHTML = Num*100; } //--> </script> <form name="form"> <input type="radio" name="radio" value="1" onclick="calc(this.value)">1 <input type="radio" name="radio" value="2" onclick="calc(this.value)">2 <input type="radio" name="radio" value="3" onclick="calc(this.value)">3 <input type="text" name="txt"> </form> <div id="num"></div>

  • ANASTASIAK
  • ベストアンサー率19% (658/3306)
回答No.1

やりたいことが見えないんだけど、結局ラジオボタンの 持っているvalue値をどうしたいわけ?

ukurere84
質問者

補足

計算に使いたいんです。

関連するQ&A

  • ラジオボタンを押して計算結果を出した後、全てをnull値に戻すには?

    初心者ながらがんばっています。どうか宜しくお願いします。 <HTML> <head> <script language="JavaScript"> <!-- function calc(radio, form) {   form.OUT.value = form.IN.value * radio.value; } //--> </script> </head> というスクリプト内容で、 計算する数値:<input type=TEXT name="IN" size=10 value=0> <input type=RADIO name="MODE" value="3.14" onClick="calc(this,this.form)"> cm 計算結果:<input type=TEXT name="OUT" size=10 value=0 style="text-align:right"> cm このラジオボタンをクリアして、計算する数値と計算結果の場所をブランクにするには、どのように組めば良いのでしょう。onclickを使うことは解るのですが、どんなふうに組んでも、うまく動作しません。

  • Javascriptでラジオボタンとチェックボックスの値を足して計算し

    Javascriptでラジオボタンとチェックボックスの値を足して計算しようとしました。 しかし、チェックボックス同士の値は足されるのですが、ラジオボタンの値は計算されずにそのまま表示されます。 ラジオボタンの値も足されるようにするにはどうしたら良いでしょうか。 よろしくお願いいたします。 javascript↓ function calc2() { var ss=""; var fs= document.forms; for (var f=0 ; f<fs.length ; f++) { //formが複数ある場合、formの数だけ繰り返し d = fs[f].elements; //dにform内のエレメントを代入 checkvalue = 0; //checkvalueの値を0にする。ここをcheckvalue = ""; にすると、文字列として扱われる for (var i = 0; i < d.length; i++ ) { //form内のエレメントの数だけ繰り返し if (d[i].checked == true) { //チェックボックスがチェックされていたら checkvalue += Number(d[i].value); //checkvalueの値(整数の場合)にそれぞれのエレメントの値(value)を追加していく } } ss += checkvalue; function addFigure(str) { //3桁のカンマ挿入 var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } var sss = addFigure(ss); //ssの値にカンマを挿入してsssに代入 } document.getElementById('ch_all').innerHTML = "\\" + sss; //html本文内のid="ch_all"の場所に書き出す } 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>

  • ラジオボタンの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>

  • ラジオボタンの値を・・・・・

    <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」で保存します

  • 複数のラジオボタン選択肢により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>

  • 選択したたラジオボタンの値をSUBMITボタンに

    選択したたラジオボタンの値をSUBMITボタンの名前として自動的に替えたいのですが、助言をいただけますか。 イメージは下記です。★の部分に、クリックごとにradioの値を入れたいのです。 <script Language="JavaScript"><!-- function set() { n = document.myFORM.Radio.value; } // --> </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>

  • ラジオボタンで選択変更

    ラジオボタンで選択した背景色に変更する方法はわかったのですが。。。 「★ラジオボタン」で、 「ページの移動」(別のページ)するには、どうしたらいいのでしょうか???(↓この方法でなくてもいいです。。。) <HTML> <HEAD> <TITLE></TITLE> </HEAD> <SCRIPT language="JavaScript"> <!-- function changeColor(num){ if(num==0){ document.bgColor="#ffffff"; }else if(num==1){ document.bgColor="#ffcccc"; }else if(num==2){ document.bgColor="#ccffcc"; }else if(num==3){ document.bgColor="#ccccff"; } } // --> </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>

  • 初歩がわかりません。

    おとといJavascriptはじめたものです。 VBやHTMLなどは少しだけ触ったことがあります。 足し算のプログラムで意味がわからない部分があり困っています。 <html> <head> <script language="javascript"> <!-- function calc(CL) { CL.Z.value = eval(CL.X.value)+eval(CL.Y.value) } //--> </script> </head> <body> フォームを使った計算 <form name="Calc"> <input type="text" name="X" value="0" size=10> + <input type="text" name="Y" value="0" size=10> = <input type="text" name="Z" size=10> <p> <input type="button" value="計算!!" onclick="calc(this.form)"> <input type="reset" value="clear"> </form> </body> </html> 上記のプログラムで、onclick="calc(this.form)"とありますが、どういう動作させているのでしょうか。 またSCRIPTのなかの function calc(CL) { CL.Z.value = eval(CL.X.value)+eval(CL.Y.value) } CL.X.value のvalueてなんのことでしょうか。 XとYを取り出して足しているってことはなんとなくわかるんですけれど。。 特に同一ページ内のjavascriptにpost?するっていうのがよくわかりません。 この場合どうやってSCRIPTに送って、どうやって数値を取り出しているのか、どなたかアドバイスお願いいたします。よろしくおねがいします。

  • ボタンを押して計算結果を出したい

    下記のもの、うまくいきません。 どのようにしたらよいのでしょうか? 教えてください。よろしくお願いします。 <HTML> <HEAD> <TITLE>Calculator</TITLE> <SCRIPT language = "JavaScript"> function calc(Submit){ Num1 = document.foam1.Num1; Num2 = document.foam1.Num2; Ans = document.foam1.Ans; document.foam1.Ans.value = s1 Ans s2; } </SCRIPT> </HEAD> <PRE> 数値1 演算子 数値2 答え</PRE> <FORM METHOD=GET ACTION="/calc/calc.exe"> <INPUT NAME="Num1" VALUE="" onChange="calc()"> <SELECT NAME="Opr" SIZE=1 VALUE="" onChange="calc()"> <OPTION>+<OPTION>-<OPTION>*<OPTION>/</SELECT> <INPUT NAME="Num2" VALUE="" onChange="calc()"> = <INPUT NAME="Ans" VALUE="" onChange="calc()"> <INPUT TYPE="Submit" VALUE="計算"> </FORM> <H2></H2> </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>