dポイントプレゼントキャンペーン実施中！

ラジオボタンとチェックボックスの計算について

解決済

  • 質問者：sakura_blog_net
  • 質問日時：
  • 回答数：3件

ラジオボタンとチェックボックスで選択して、その合計を表示させたいのですが、合計の最高は50になる用に作ったのですが、9点にしかなりません。
私が考えるに、<script language="JavaScript">～</script>の間が間違っていると思うのですがどうでしょうか？

皆様ご教授の程お願いします。

<script language="JavaScript">
<!--
// 項目の合計を計算
function ttlValue() {
chn = 10; // ラジオボタンとチェックボックスの総数
ttl = 0;
for(i=0; i<chn; i++) {
if(document.nForm.elements[i].checked) {
ttl += eval(document.nForm.elements[i].value);
}
}
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" value="3" checked="checked" type="radio">a<br>
<input name="ch1" value="2" type="radio">b<br>
<input name="ch1" value="1" type="radio">c<br>
<input name="ch1" value="0" type="radio">d<br>
<br>
項目2<br>
<input name="ch2" value="3" checked="checked" type="radio">a<br>
<input name="ch2" value="2" type="radio">b<br>
<input name="ch2" value="1" type="radio">c<br>
<input name="ch2" value="0" type="radio">d<br>
<br>
項目3<br>
<input name="ch3" value="3" checked="checked" type="radio">a<br>
<input name="ch3" value="2" type="radio">b<br>
<input name="ch3" value="1" type="radio">c<br>
<input name="ch3" value="0" type="radio">d<br>
<br>
項目4<br>
<input name="ch4" value="1" checked="checked" type="radio">a<br>
<input name="ch4" value="0" type="radio">b<br>
<br>
項目5<br>
<input name="ch5" value="1" checked="checked" type="radio">a<br>
<input name="ch5" 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" value="10" checked="checked" type="radio">20年以上<br>
<input name="ch6" value="5" type="radio">19年～10年<br>
<input name="ch6" value="3" type="radio">9年～5年<br>
<input name="ch6" value="1" type="radio">4年～3年<br>
<input name="ch6" value="0" type="radio">2年未満<br>
<br>
<input value="合計金額を計算" onclick="ttlValue()" type="button"><br>
<br>
合計<input name="result" size="10" type="text">
</form>
<br>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： Ogre7077
  • 回答日時：

<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 を安易に使わない - 安全性と性能とデバッグ都合のため
    • good
    • 0
    • 件
通報する
この回答へのお礼

Ogre7077様ありがとうございます！！

あとは、この選択された項目と合計をメールフォームで飛ばしたいのですがそのような事は可能でしょうか？
メールフォームを下につけてみました。

もし、よろしければご教授の程お願いします。

http://oshiete.goo.ne.jp/qa/8072357.html

通報する
お礼日時：2013/05/04 12:56

No.2

蛇足です。



ラジオボタンのチェックだけ数える場合です。


<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>


同じようにチェックボックスのチェック数も足し算してラジオボタンのチェック合計と足し算すると計がでます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！無事に合計のところに数字を出すことが出来ました！！

ラジオボタンの項目で項目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点になるようにしてみたのですが、こういう点数の反映の仕方は可能でしょうか？

追加質問させていただきありがとうございます。

通報する
お礼日時：2013/05/04 10:50

No.1

こんにちは




＞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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

解決しました！ありがとうございました！

通報する
お礼日時：2013/06/02 07:04

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報