• 締切済み

JavaScriptのラジオボタンを使って計算をしたい

JavaScriptのラジオボタンを使って簡単な計算をしたいと考えています。 1-1◎ 1-2○ 1-3○ ←１を選ぶと１点 2-1◎ 2-2○ 2-3○ ←１を選ぶと１点 3-1○ 3-2◎ 3-3○ ←２を選ぶと２点 4-1○ 4-2○ 4-3◎ ←３を選ぶと３点 合計：７点 このときグループは４つあるのですが、それぞれ得点を設定し、グループごとの得点を最後のフォームに表示させたいのです。 初めて、本を買いました。良く分かりません。よろしくお願いします。

みんなの回答

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

こんな感じでどうでしょう？ <html> <head> <script language="javascript"> function calc(f){ var sum=0; for(var i=0;i<f.length;i++){ if(f[i].type=="radio" && f[i].checked) sum+=parseInt(f[i].value); } f.sum.value=sum; } </script> </head> <body> <form> 1-1<input type="radio" name="group1" value="1"> 1-2<input type="radio" name="group1" value="2"> 1-3<input type="radio" name="group1" value="3"><br> 2-1<input type="radio" name="group2" value="1"> 2-2<input type="radio" name="group2" value="2"> 2-3<input type="radio" name="group2" value="3"><br> 3-1<input type="radio" name="group3" value="1"> 3-2<input type="radio" name="group3" value="2"> 3-3<input type="radio" name="group3" value="3"><br> 4-1<input type="radio" name="group4" value="1"> 4-2<input type="radio" name="group4" value="2"> 4-3<input type="radio" name="group4" value="3"><br> 合計：<input type="text" name="sum" style="text-align:right">点 <input type="button" value="集計" onClick="calc(this.form)"> </form> </body> </html>

tunekiti-
質問者

お礼

早速ありがとうございました。 大変助かりました。自分でも参考にして、早く思うようなコードが書けるようにしたいと思います。感謝！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JavaScripを使用して。2グループのラジオボタンの計算をする方法。

    こんにちわ、JavaScript初心者です。 2つのグループのラジオボタンとひとつのチェックボックスを選び、計算結果をアラートで表示させるJavaScriptを作りたいと思っています。IEでは表示されるのですが、FireFoxではアラートが全く表示されません。（；；）どうぞお助けください。内容的には フォーム グループ1 ○500円 ○1000円 ○2000円 ○3000円 グループ２ ○A（を選ぶと値段はそのまま） ○B（を選ぶと値段が2倍） ○C（を選ぶと値段が4倍） ○D（を選ぶと値段が6倍） ○F（を選ぶと値段が10倍） 最後に人数が10人以上□（チェックボックスで、チェックした場合は合計金額に200円追加） で、ボタンを押すと合計金額が出る仕組みです。 どうぞ、よろしくお願いいたします。 m(_ _)m

  • ラジオボタンの制御

    ラジオボタンの制御について質問をお願い致します。 ラジオボタンを選択することで、 フォーム内の部品を表示と非表示を切り替えるようにしました。 例えば、表示しないと表示するというラジオボタンを２つ配置し、 表示すると言うラジオボタンを選択すると非表示の部品が表示され、 表示しないと言うラジオボタンを選択すると表示されている部品が、 非表示に設定されるようなフームをあった場合に、 フォームオブジェクトのボタンをクリックすることで、 ラジオボタンの表示するが選択され状態にしたり、 ラジオボタンの表示しないが選択された状態にするための、 JavaScriptをどのように作成すれば良いかのアドバイスを、 頂ければ幸いです。 どうぞよろしくお願い致します。

  • javascript　ラジオボタン

    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="" の時は、はじめは非表示 という感じの内容でラジオボタン選択すると表示/非表示されると言うものを作成したいと思っています。 説明がわかりにくいと思いますがどうぞよろしくお願いします。

  • ラジオボタンについて。

    データの更新を行なう画面をつくり、データベースから取得したデータをもとにテキストの内容やラジオボタンのチェックの有無を画面に表示させようとしています。 最初に更新画面を呼び出し、データを表示することはうまくいくました。 しかし、IEの[表示]-[エンコード]や[最新の状態に更新]をやったり、戻るボタンで戻ると、テキストの内容は表示されるのですが、ラジオボタンは、なぜか一瞬チェックした後に、すぐチェックが外れてしまいます。 今やっているのは、Webの画面全てをASPで表示した後で、 最後にJavaScriptにより、 <script language='javaScript'> ラジオボタン名(i).checked = true; </script> のようにやっているのですが。。。 このやり方がまずいのでしょうか？ 最初にボタン設定する際に"<INPUT TYPE ='radio' ～ checked>"で指定しなければいけないのでしょうか？ よろしくお願いします。

  • javascriptのラジオボタンの使用方法

    javascriptでラジオボタンを使ってプログラミングしているのですが、ラジオボタンにうまく変数・値を設定できません。 できればＣＧＩを使いたくないのですが、どのようにすればうまく設定し、動作させることができるでしょうか？

  • Javascriptを使って動的にラジオボタンを配置する方法

    こんにちは。 Javascriptを模索しながら仕事で作業しています。 (突然、要員として投入されてしまいました <(ToT)> ) タイトルにあるように、ラジオボタンをJavascript を使って、ラジオボタンの配置数を動的に変化させ たいのですが、ネットを検索しても、ラジオボタン の配置数を動的にしているサイトがないので、難航 中す。「ラジオボタンの配置数を固定として…」が ほとんどでした。 画面を表示するときに、JavaBeanでラジオボタンの 情報を獲得できるので、この情報に従い表示したい です。表示中に、ラジオボタンの配置を変更するこ とはなく、submitにより、入力内容のチェックを行っ た後、サーブレットを起動する流れになっています。 すみませんが、手助けお願いします。

  • ラジオボタンを使ったアンケート

    初めて質問させていただきます。 ラジオボタンを使ったアンケートを作りたいと思っています。 形式としては問いに対して、 　・非常によくあてはまる 　・よくあてはまる 　・ややあてはまる 　・あまりあてはまらない 　・ほとんどあてはまらない 　・まったくあてはまらない という６つの選択肢から選んでもらい、それぞれ５点～０点の得点を当てはめておきます。 問にはそれぞれ、下記のようにa,bという対になる質問があり、合計で５点になるような形でフォームを作りたいのです。 問１-a.あなたは人の意見があって初めて行動する。 問１-b.人のアドバイスなしに行動する。 例えば、上記の問題で、『問１-a』にたいしてややあてはまる（３点）を選んだ場合、自動的に『問１-b』のあまりあてはまらない（２点）の欄のラジオボタンにチェックがつくという仕組みを作りたいと考えています。逆に『問１-b』に答えた場合には、『問１-a』の対応する欄に自動的にチェックが入る形を作りたいと思います。 稚拙な説明で分かりづらいかも知れませんが、何卒ご回答くださいますようお願いいたします。

  • ラジオボタンの表示非表示のjavascriptにつ

    申し訳ありません。 お詳しい方に教えていただきたいのです。 以前、こちらでご質問して回答いただいたのですが、 問題がありまして、ラジオボタンのyes,noでyesを選択したら、フォームページが現れるという仕組みを教わったのですが、 フォームの方はjavascriptを仕組み、例えば記入していない欄をそのままにして送信ボタンを押すと、赤い文字でエラー表示するフォームを作っているのです。エラーの状態で送信ボタンを押すと、最初のラジオボタンのyes,noに戻ってしまい、フォームがたたんだ状態になるそうなのです。 それで、いきなりフォームがたたまれて最初の状態に戻るのではなく、フォームにエラーが表示されるようにしたいのです。 yes.noをせんたくするjavascriptに問題があるのではないかと思っているのですが。。 もしおわかりになるかたがいらっしゃいましたらおしえていただけませんでしょうか。 よろしくお願い致します。 以下は教えていただいたjavascriptです。 フォームは簡単なものになっているので、javascriptは入っておりません。 ==== 動作サンプル http://hppg.moe.hm/okwave/qa/q7294891/ ==== ソース <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>【OKWave回答サンプル集】ラジオボタンによる表示、非表示について</title> <link rel="stylesheet" href="/okwave/qa/css/basic.css" type="text/css" /> <script type="text/javascript"> var dispArea; var dispAreaMsg; window.onload = function() { dispArea = document.getElementById('disparea'); dispAreaMsg = document.getElementById('dispareamsg'); } function change ( value ) { if ( value == 'yes' ) { dispArea.style.display = 'block'; dispAreaMsg.style.display = 'none'; } else if ( value == 'no' ) { dispArea.style.display = 'none'; dispAreaMsg.style.display = 'block'; } } </script> <style type="text/css"> #disparea { display:none; } #dispareamsg { display:none; } </style> </head> <body> <h1>ラジオボタンによる表示、非表示について</h1> <form name="test"> <input type="radio" name="conf" value="yes" onclick="change(this.value);"/>はい <input type="radio" name="conf" value="no" onclick="change(this.value);" />いいえ <p id="disparea"> <input type="button" value="応募" /> </p> <p id="dispareamsg"> 応募できません。 </p> </form> </body> </html>

  • ラジオボタンの項目をチェックして計算する

    JavaScriptあるいはPHPのラジオボタンを使って表を作り 縦列の計算をしたいと考えています。 　　　　a b c 1-1◎ 2○ 3○ 2-1◎ 2○ 3○ 3-1○ 2◎ 3○ 4-1○ 2○ 3◎ ◎になっている縦列（a~c列）の数値と チェックされた数はどのようなプログラムを使うと計算できるのでしょうか？ ※この場合、 　　　合計はa:2/b:2/c:3 　　　チェックはa:2/b:1/c:1となります。 ご教授頂ければ幸いです。 よろしくお願い致します！

  • ラジオボタンによる表示、非表示について

    申し訳ありませんjavascriptにうといため、ご質問させてください。 ラジオボタンが”はい”と”いいえ”とあって、 その下の段落に表示と非表示させたいのですが、 まず最初に、何も選択されていない状態の時に、なにも表示されていない非表示の状態に、 ”はい”というラジオボタンをおしたらフォーム画面が表示される。 ”いいえ”とおしたら”応募できません”と文字が表示される。 と言う風に、３つのアクションを作りたいのですが、 どのようにして良いかわかりません。 詳しい方どうぞよろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する