【最大10000ポイント】当たる!!質問投稿キャンペーン!

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;"></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>

このQ&Aに関連する最新のQ&A

A 回答 (1件)

チェックボックスとラジオボタンの値を合計すればよいと解釈しました。


解説は省略。(value値はカンマなしと仮定)

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;
}
    • good
    • 0
この回答へのお礼

早速の回答ありがとうございます!
希望通りの動作ができました。しかもコードがすっきりして見やすいです。
素晴らしい!
頂いた回答を元に、もっと勉強したいと思います。
本当にありがとうございました。

お礼日時:2010/04/02 06:22

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

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

ラジオボタンとチェックボックスで選択して、その合計を表示させたいのですが、合計の最高は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>

ラジオボタンとチェックボックスで選択して、その合計を表示させたいのですが、合計の最高は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...続きを読む

Aベストアンサー

<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 を安易に使わない - 安全性と性能とデバッグ都合のため

<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.v...続きを読む

Qチェックボックスやラジオボタンでの計算

チェックボックスや、ラジオボタンで、選択した項目の金額を、最後にテキストフォームに表示させる…というやり方を探しております

ソース途中からですが…↓
<tr>
<Td Valign="middle" Width="80">部数選択</td>
<Td Align="center" Valign="middle"><必須></td>
<Td>
<Input Type="radio" Name="pay" Value="100部 10000円">100部 ¥10,000円<Br>
<Input Type="radio" Name="pay" Value="150部 20000円">150部 ¥20,000円<Br>
<Input Type="radio" Name="pay" Value="200部 30000円">200部 ¥30,000円<Br>
<Input Type="radio" Name="pay" Value="300部 40000円">300部 ¥40,000円<Br>
<Input Type="radio" Name="pay" Value="300部以上 ※お見積もりいたします">300部以上 ※お見積もりいたします<Br>
</td>
</tr>
<tr>
<Td Valign="middle" Width="80">オプション選択<Br>(複数選択可)</td>
<Td Align="center" Valign="middle"><必須></td>
<Td>
<Input Type="checkbox" Name="op[]" value="地図を入れる">地図を入れる<Br>
<Input Type="checkbox" Name="op[]" value="先生のプロフィールを入れ">先生のプロフィールを入れる<Br>
<Input Type="checkbox" Name="op[]" value="ごあいさつを入れる">ごあいさつを入れる<Br>
<Input Type="checkbox" Name="op[]" value="生徒募集中を入れ">生徒募集中を入れる<Br>
<Input Type="checkbox" Name="op[]" value="写真を入れる">写真を入れる<Br>
<Input Type="checkbox" Name="op[]" value="ゲスト紹介">ゲスト紹介<Br>
<Input Type="checkbox" Name="op[]" value="QRコード">QRコード<Br>
</td>
</tr>

といった感じです。
value はすでに、他のところで使用しています
単純に計算だけを目的とさせているんですが、どうしたら良いでしょうか?

チェックボックスや、ラジオボタンで、選択した項目の金額を、最後にテキストフォームに表示させる…というやり方を探しております

ソース途中からですが…↓
<tr>
<Td Valign="middle" Width="80">部数選択</td>
<Td Align="center" Valign="middle"><必須></td>
<Td>
<Input Type="radio" Name="pay" Value="100部 10000円">100部 ¥10,000円<Br>
<Input Type="radio" Name="pay" Value="150部 20000円">150部 ¥20,000円<Br>
<Input Type="radio" Name="pay" Value="200部 30000円">200部 ¥30,00...続きを読む

Aベストアンサー

<html>
<body>
<Input Type="radio" Name="pay" Value="100部 10000円">100部 ¥10,000円<Br>
<Input Type="radio" Name="pay" Value="150部 20000円">150部 ¥20,000円<Br>
<Input Type="radio" Name="pay" Value="200部 30000円">200部 ¥30,000円<Br>
<Input Type="radio" Name="pay" Value="300部 40000円">300部 ¥40,000円<Br>
<Input Type="radio" Name="pay" Value="300部以上 ※お見積もりいたします">300部以<br>
<input type="text" id="a">
<input type="button" value="Get Value" onClick="viewRadioValue('pay')"><br>

<script>
function viewRadioValue(n){
var val = getRadioValue(n), s;
if(val) document.getElementById('a').value = (s=val.match(/ (\d*)円$/),(s?s[1]-0:'不明'));
}
function getRadioValue(n){
for(var i=0,e=document.getElementsByName(n),mx=e.length;i<mx;i++) if(e[i].checked) return e[i].value;
}
</script>

<html>
<body>
<Input Type="radio" Name="pay" Value="100部 10000円">100部 ¥10,000円<Br>
<Input Type="radio" Name="pay" Value="150部 20000円">150部 ¥20,000円<Br>
<Input Type="radio" Name="pay" Value="200部 30000円">200部 ¥30,000円<Br>
<Input Type="radio" Name="pay" Value="300部 40000円">300部 ¥40,000円<Br>
<Input Type="radio" Name="pay" Value="300部以上 ※お見積もりいたします">300部以<br>
<input type="text" id="a">
<input type="button" value="Get Value" o...続きを読む

Qチェックボックスの値を取り出したい

こんにちは JavaScript初心者です。
過去ログを見ながらここまでやったのですが、何も表示されません。
?マークの所で引っかかっていると思うのですがどなたかご教授願います。
やりたい事は、チェックボックスのチェックの入った所の値を取り出して表示したいのですが...
3つチェックされていてOKをクリックした時に、ABC と出てくるのが理想です。
<html>
<SCRIPT LANGUAGE="JavaScript">
<!--
function chkform() {
for(i=1; i<=3; i++) {

chkdata(i) = document.form0.chk(i).Value    ?
var aa = chkdata(i)

document.write(aa)
}
}
//--></SCRIPT>

<FORM onSubmit="return chkform(this)" name = "form0">

<INPUT type="checkbox" name="chk" value="A" >
<INPUT type="checkbox" name="chk" value="B" >
<INPUT type="checkbox" name="chk" value="C" >

<INPUT type="submit" value="OK" >
</form>

</html>

こんにちは JavaScript初心者です。
過去ログを見ながらここまでやったのですが、何も表示されません。
?マークの所で引っかかっていると思うのですがどなたかご教授願います。
やりたい事は、チェックボックスのチェックの入った所の値を取り出して表示したいのですが...
3つチェックされていてOKをクリックした時に、ABC と出てくるのが理想です。
<html>
<SCRIPT LANGUAGE="JavaScript">
<!--
function chkform() {
for(i=1; i<=3; i++) {

chkdata(i) = document.form0.chk(i).Value   ...続きを読む

Aベストアンサー

これでは全然ダメです。
もう少し本なり見て勉強しましょう。

function chkform() {

var chkdata = new Array();
var aa = "";
var len = document.form0.chk.length;

for(i=0; i<len; i++) {
if ( document.form0.chk[i].checked ) {
chkdata[i] = document.form0.chk[i].value;
aa += chkdata[i];
}
}
document.write(aa);
}

やるなら、こんな感じで良いのでは?
#私的にはこんなのでも嫌ですが。。。

各行で何をやってるか理解した上でご使用ください。m(__)m

Qラジオボタンで選択した項目の合計金額を出したい

簡単な見積フォームを作成中です。
ラジオボタンで商品を選択して、その合計金額を表示させたいのですが、何故か”undefined”と表示されてしまいます。
根本的な考え方が間違っているのでしょうか?
皆様ご教授の程お願いします。

<HTML><HEAD>
<!--
function calc(){
hontai=document.ordersheet.hontai.VALUE;
document.ordersheet.output.value=hontai;
}
//-->
</SCRIPT></HEAD>
<BODY>
<FORM NAME="ordersheet" METHOD="POST"onsubmit="return check()">
<TABLE cellPadding=3 width=680>
<TBODY><TR>
<TD align=middle colSpan=5>お見積り内容
<TR><TD align=middle width=30>
<TD align=middle width=200>
<TD align=middle width=150>商品名
<TD align=middle width=150>商品名
<TD align=middle width=150>商品名 </TD>
<TR><TD rowspan="2" align=middle width=30>本体
<TD rowspan="2" width=350></TD>
<TD width=145>A商品<BR>273000円(税込)<BR>
<TD width=145>B商品<BR>288750円(税込)<BR>
<TD width=145>C商品<BR>109410円(税込)<BR>
</TD>
<TR>
<TD><DIV><INPUT TYPE="radio" NAME="hontai" VALUE="273000" onClick="calc()"></DIV></TD>
<TD><DIV><INPUT TYPE="radio" NAME="hontai" VALUE="288750" onClick="calc()"></DIV></TD>
<TD><DIV><INPUT TYPE="radio" NAME="hontai" VALUE="109410" onClick="calc()"></DIV></TD>
</TR>
<TR><TD align=center colspan="2">合計金額</TD>
<TD colspan="3" ><INPUT TYPE="text"NAME="output" SIZE="12">円</TD></TR>
</TBODY></TABLE></FORM>
</BODY></HTML>

簡単な見積フォームを作成中です。
ラジオボタンで商品を選択して、その合計金額を表示させたいのですが、何故か”undefined”と表示されてしまいます。
根本的な考え方が間違っているのでしょうか?
皆様ご教授の程お願いします。

<HTML><HEAD>
<!--
function calc(){
hontai=document.ordersheet.hontai.VALUE;
document.ordersheet.output.value=hontai;
}
//-->
</SCRIPT></HEAD>
<BODY>
<FORM NAME="ordersheet" METHOD="POST"onsubmit="return check()">
<TABLE cellPadding=3 width=680>
<T...続きを読む

Aベストアンサー

すみません。
失礼なのですが、javascriptより先に
HTMLから見直した方がよろしいかと思いました。
おせっかいながらとても見づらかったので、
全部やりなおしてしまいました。
レイアウトはまた修正してください。
差分を取ってじっくり見直してください。
ケアレスミスもあります。
ラジオボタンやセレクトボタン等の取り方は
存在回数分ループで回すのが基本です。


---------------------------------------------
<HTML>
<HEAD>
<script language="JavaScript">
<!--
function calc() {
for(i = 0; i < 3; i++ ) {
if(hontai = document.ordersheet.hontai[i].checked) {
document.ordersheet.output.value = document.ordersheet.hontai[i].value;
}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad=(document.ordersheet.output.value="0")>
<FORM NAME="ordersheet" METHOD="POST"onsubmit="return check()">
<TABLE cellPadding=3 width=680>
<TBODY>
<TR>
<TD align=middle colspan=5>お見積り内容</TD>
</TR>
<TR>
<TD align=middle width=30></TD>
<TD align=middle width=200></TD>
<TD align=middle width=150>商品名</TD>
<TD align=middle width=150>商品名</TD>
<TD align=middle width=150>商品名</TD>
</TR>
<TR>
<TD align=center colspan="2">本体</TD>
<TD width=150>A商品<BR>273000円(税込)</TD>
<TD width=150>B商品<BR>288750円(税込)</TD>
<TD width=150>C商品<BR>109410円(税込)</TD>
<TR>
</TR>
<TD align=middle width=30></TD>
<TD align=middle width=200></TD>
<TD><DIV><INPUT TYPE="radio" NAME="hontai" onClick="calc()" VALUE="273000"></DIV></TD>
<TD><DIV><INPUT TYPE="radio" NAME="hontai" onClick="calc()" VALUE="288750"></DIV></TD>
<TD><DIV><INPUT TYPE="radio" NAME="hontai" onClick="calc()" VALUE="109410"></DIV></TD>
</TR>
<TR>
<TD align=center colspan="2">合計金額</TD>
<TD colspan="3">
<INPUT TYPE="text" NAME="output" value="0" SIZE="12">円</TD>
</TR>
</TBODY>
</TABLE>
</FORM>
</BODY>
</HTML>

-------------------------------------------------

すみません。
失礼なのですが、javascriptより先に
HTMLから見直した方がよろしいかと思いました。
おせっかいながらとても見づらかったので、
全部やりなおしてしまいました。
レイアウトはまた修正してください。
差分を取ってじっくり見直してください。
ケアレスミスもあります。
ラジオボタンやセレクトボタン等の取り方は
存在回数分ループで回すのが基本です。


---------------------------------------------
<HTML>
<HEAD>
<script language="JavaScript">
<!--
function calc() {
f...続きを読む

Qチェックボックスから複数のvalueを取り出す

HTMLフォームから、action="file.php"でデータの受け渡し→PHPで送られてきたvalueに応じて文章を出力、というプログラムを作っています。

例:
グループAのラジオボタン1にチェック、送信
→グループAで押されたラジオボタンを送信されたvalueで判別、この場合はvalue==A
→value==Aの場合に表示する文章を変数に受け渡し、その変数で表示

ラジオボタン、テキストボックスのvalueは$_POST['XXX']で取り出せたのですが、チェックボックスのデータだけが取り出せません。こちらの質問を検索したとき、多次元配列という言葉を見かけたのですが、いまいちよく分かりませんでした。
チェックボックスの複数のvalueで、上記の例のような動きを実現させるにはどうしたらいいでしょうか。どなたかご教授ください。

Aベストアンサー

チェックボックスはちょっと特殊

まずHTML部分で、以下のように定義します
<input type="checkbox" name="sample[]" value="test1">test1
<input type="checkbox" name="sample[]" value="test2">test2

ここでは、nameの部分に[]をつけるのがポイント


次にphpで受け取る方法として、
$sample = $_POST["sample"];
で問題ありません。

受け取ったデータを使うときは、$sampleは配列になっていますので、
仮に上記のtest1とtest2両方にチェックが付いているとしたら、
$sample[0]にはtest1が、$sample[1]にはtest2が入っています。

$sampleをforeachで使うか、$sampleのデータ数を調べてforでループさせるなどで使えます。

Q配列で渡されたチェックボックスの値の処理

POST元のページから
<input type="checkbox" name="hoge[23]" value="1">
<input type="checkbox" name="hoge[31]" value="0">
<input type="checkbox" name="hoge[33]" value="1">
・・・
のような形でデータが渡されます。
要素一つに付き、ONなのか、OFFなのか、表示されていないのかの判別が必要なため、このような形になっています。
受けるPHP側で、hogeの配列番号と一致したものがあればそれに対する処理を行う必要があります。
$buff=array(20,30,31);
となっているとして、
$_POST["hoge"]の配列の値と$buff内の数字が一致したら~
(上記例だと31が一致)
の書き方はどう書けばいいでしょうか。

よろしくお願いします。

Aベストアンサー

$buff = array(20,30,31);
foreach ($_POST['hoge'] as $key => $val) {
if (in_array($key, $buff)) {
// 見つかったときの処理
}
}


人気Q&Aランキング