- ベストアンサー
ラジオボタンとチェックボックスの計算について
- ラジオボタンとチェックボックスで選択して、その合計を表示させたいのですが、合計の最高は50になる用に作ったのですが、9点にしかなりません。
- <script language="JavaScript">～</script>の間が間違っていると思うのですがどうでしょうか？
- 質問文中のJavaScriptコードが正しく動作しないため、合計の計算結果が9点になってしまっています。
- sakura_blog_net
- お礼率100% (9/9)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<script> が原因ですね。 もっと簡単に elements を全て調べれば良いのではないでしょうか。 値を読み取る対象を限定さえすれば、事故は起きないでしょう。 <script> function ttlValue() { var inps = document.nForm.elements; var chn = inps.length; // 総数はこれで取れる var ttl = 0; for(var i=0; i<chn; i++) { var inp = inps[i]; if(inp.checked || inp.options) { // 選択された radio / 選択された checkbox / select に限定 ttl += parseInt(inp.value); } } document.nForm.result.value = ttl; } </script> 余談ですが、コーディングに際しては以下を心がけてください。 変数の var 宣言をちゃんと付ける - 名前空間汚染によるバグ回避 二回以上使う値は変数にする - 読み易くなりロジックが明確になる、そして性能向上 eval を安易に使わない - 安全性と性能とデバッグ都合のため
その他の回答 (2)
- 田中 裕之（@bybalsendercase）
- ベストアンサー率88% (56/63)
蛇足です。 ラジオボタンのチェックだけ数える場合です。 <script type="text/javascript"> // 項目の合計を計算 function ttlValue() { chn = 48; // ラジオボタンとチェックボックスの総数 ttl = 0; // ラジオボタンidを配列にする var radid = ["0", "1", "2", "3", "4", "5", "6", "7","8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"]; var r=0; for (k = 0; k < 21; k++) { if (document.getElementById(radid[k]).checked) { r += 1; } } alert(r+"個のラジオボタンがチェックされました。"); for (i = 0; i < chn; i++) { if (document.nForm.elements[i].checked) { ttl +=1; } } document.nForm.result.value = ttl; } </script> </head> <body alink="#000000" bgcolor="#f0f8ff" link="#00ffff" text="#000000" vlink="#ff0000"> <br> それぞれの項目で該当する回答を1つずつ選択して下さい。 <form name="nForm">項目1<br> <input name="ch1" id="0" value="3" checked="checked" type="radio">a<br> <input name="ch1" id="1" value="2" type="radio">b<br> <input name="ch1" id="2" value="1" type="radio">c<br> <input name="ch1" id="3" value="0" type="radio">d<br> <br> 項目2<br> <input name="ch2" id="4" value="3" checked="checked" type="radio">a<br> <input name="ch2" id="5" value="2" type="radio">b<br> <input name="ch2" id="6" value="1" type="radio">c<br> <input name="ch2" id="7" value="0" type="radio">d<br> <br> 項目3<br> <input name="ch3" id="8" value="3" checked="checked" type="radio">a<br> <input name="ch3" id="9" value="2" type="radio">b<br> <input name="ch3" id="10" value="1" type="radio">c<br> <input name="ch3" id="11" value="0" type="radio">d<br> <br> 項目4<br> <input name="ch4" id="12" value="1" checked="checked" type="radio">a<br> <input name="ch4" id="13" value="0" type="radio">b<br> <br> 項目5<br> <input name="ch5" id="14" value="1" checked="checked" type="radio">a<br> <input name="ch5" id="15" value="0" type="radio">b<br> <br> オプションがあれば選択して下さい。（複数選択可）<br> <input name="bx1" value="1" type="checkbox">1<br> <input name="bx1" value="1" type="checkbox">2<br> <input name="bx1" value="1" type="checkbox">3<br> <input name="bx1" value="1" type="checkbox">4<br> <input name="bx1" value="1" type="checkbox">5<br> <input name="bx1" value="1" type="checkbox">6<br> <input name="bx1" value="1" type="checkbox">7<br> <input name="bx1" value="1" type="checkbox">8<br> <input name="bx1" value="1" type="checkbox">9<br> <input name="bx1" value="1" type="checkbox">10<br> <input name="bx1" value="1" type="checkbox">11<br> <input name="bx1" value="1" type="checkbox">12<br> <input name="bx1" value="1" type="checkbox">13<br> <input name="bx1" value="1" type="checkbox">14<br> <input name="bx1" value="1" type="checkbox">15<br> <input name="bx1" value="1" type="checkbox">16<br> <input name="bx1" value="1" type="checkbox">17<br> <input name="bx1" value="1" type="checkbox">18<br> <input name="bx1" value="1" type="checkbox">19<br> <input name="bx1" value="1" type="checkbox">20<br> <input name="bx1" value="1" type="checkbox">21<br> <input name="bx1" value="1" type="checkbox">22<br> <input name="bx1" value="1" type="checkbox">23<br> <input name="bx1" value="1" type="checkbox">24<br> あなたの獲得したメダルは何色？<br> <select name="ch2"> <option value="0" selected="selected">なし</option> <option value="5">金メダル</option> <option value="3">銀メダル</option> <option value="1">銅メダル</option> </select> <br> <br> メダル獲得まで何年かかりましたか？<br> 項目6<br> <input name="ch6" id="16" value="10" checked="checked" type="radio">20年以上<br> <input name="ch6" id="17" value="5" type="radio">19年～10年<br> <input name="ch6" id="18" value="3" type="radio">9年～5年<br> <input name="ch6" id="19" value="1" type="radio">4年～3年<br> <input name="ch6" id="20" value="0" type="radio">2年未満<br> <br> <input value="合計金額を計算" onclick="ttlValue()" type="button"><br> <br> 合計<input name="result" size="10" type="text"> </form> <br> </body> 同じようにチェックボックスのチェック数も足し算してラジオボタンのチェック合計と足し算すると計がでます。
お礼
ありがとうございます！無事に合計のところに数字を出すことが出来ました！！ ラジオボタンの項目で項目1～項目3までは、 <form name="nForm">項目1<br> <input name="ch1" id="0" value="3" checked="checked" type="radio">a<br> <input name="ch1" id="1" value="2" type="radio">b<br> <input name="ch1" id="2" value="1" type="radio">c<br> <input name="ch1" id="3" value="0" type="radio">d<br> aを選択された場合は3点 bを選択された場合は2点 cを選択された場合は1点 dを選択された場合は0点 項目4から項目5は 項目4<br> <input name="ch4" id="12" value="1" checked="checked" type="radio">a<br> <input name="ch4" id="13" value="0" type="radio">b<br> <br> 項目5<br> <input name="ch5" id="14" value="1" checked="checked" type="radio">a<br> <input name="ch5" id="15" value="0" type="radio">b<br> <br> aを選択された場合1点 bを選択された場合0点 また、項目6の 項目6<br> <input name="ch6" id="16" value="10" checked="checked" type="radio">20年以上<br> <input name="ch6" id="17" value="5" type="radio">19年～10年<br> <input name="ch6" id="18" value="3" type="radio">9年～5年<br> <input name="ch6" id="19" value="1" type="radio">4年～3年<br> <input name="ch6" id="20" value="0" type="radio">2年未満<br> <br> の場合、 19年～10年を選択された場合10点 9年～5年を選択された場合3点 4年～3年を選択された場合1点 2年未満を選択された場合0点 と反映されるように作ってみて合計が最高50点になるようにしてみたのですが、こういう点数の反映の仕方は可能でしょうか？ 追加質問させていただきありがとうございます。
- 田中 裕之（@bybalsendercase）
- ベストアンサー率88% (56/63)
こんにちは ＞chn = 10; // ラジオボタンとチェックボックスの総数 elements[i]を使用する場合は、総数は「<select name="ch2">」とか「<input value="合計金額を計算" onclick="ttlValue()" type="button">」とか「<input name="result" size="10" type="text">」を入れて全部で48個ではありませんか？違うかな～？ // 項目の合計を計算←の部分を下記のようにすれば合計が出ると思います。但しラジオボタンは1個しか選択できませんので満点にはなりません。 <script type="text/javascript"> // 項目の合計を計算 function ttlValue() { chn = 48; // ラジオボタンとチェックボックスの総数 ttl = 0; for (i = 0; i < chn; i++) { if (document.nForm.elements[i].checked) { ttl +=1; } } document.nForm.result.value = ttl; } </script>
お礼
解決しました！ありがとうございました！
お礼
Ogre7077様ありがとうございます！！ あとは、この選択された項目と合計をメールフォームで飛ばしたいのですがそのような事は可能でしょうか？ メールフォームを下につけてみました。 もし、よろしければご教授の程お願いします。 http://oshiete.goo.ne.jp/qa/8072357.html