ここから本文です

java scriptで、選択したチェックボックスの名前をページ上のどこかに表示したいと...

met********さん

2009/7/2118:38:59

java scriptで、選択したチェックボックスの名前をページ上のどこかに表示したいときはどうしたら良いのでしょうか??

javascriptで以下にしめすような選択したい項目にチェックボタンを入れて計算のボタンを押すと合計金額がテキスト内に表示されるプログラムを組みました。

この場合、選択した食品の名前のみ(リンゴやバナナなど…)をボタンの下などこのページ上のどこかにまとめて表示したい場合はどうしたら良いのでしょうか??
(スクリプトタグ等)ご教授いただけるとありがたいです。よろしくお願いします。


<head>
<title>合計金額計算</title>
<SCRIPT language="JavaScript">
<!--
function ttlValue() {
chn = 7;
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>

<FORM name="nForm">
<INPUT type="checkbox" name="bx1" value="100">リンゴ<BR>
<INPUT type="checkbox" name="bx2" value="100">ミカン<BR>
<INPUT type="checkbox" name="bx3" value="50">バナナ<BR>
<INPUT type="checkbox" name="bx4" value="200">メロン<BR>
<INPUT type="checkbox" name="bx5" value="200">ブドウ<BR>
<INPUT type="checkbox" name="bx6" value="150">イチゴ<BR>
<INPUT type="checkbox" name="bx7" value="20">スイカ<BR>

合計金額:<INPUT type="text" name="result" >円


<INPUT type="button" value="合計単位を計算" onClick="ttlValue()">
<INPUT type="reset" value="リセット">


</body>
</html>

閲覧数:
1,095
回答数:
1
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

siiさん

2009/7/2209:51:57

HTMLがこの形(input要素+テキスト)で固定されているのなら、兄弟ノードを辿るnode.nextSiblingを使って、各input要素に続くテキスト(ノード)を取得できると思います。

以下、併せていくつかの問題を修正したサンプルです。なお、エディタの都合上要素名は小文字で統一していますのでご了承下さい。

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

<script type="text/javascript">
function ttlValue() {
var chn = 7;
var ttl = 0;
var sel = ''; //選んだ果物用
for(var i = 1; i <= chn; i++) {
var t = document.forms['nForm'].elements['bx' + i];
if(t.checked) {
ttl += Number(t.value);
sel += t.nextSibling.nodeValue + ', '; //input要素の弟ノード
}
}
document.forms['nForm'].elements['result'].value = ttl;
document.forms['nForm'].elements['sel'].value = sel.substring(0, sel.length - 2); //最後の , を削除
}
</script>

<form name="nForm">
<input type="checkbox" name="bx1" value="100">リンゴ<br>
<input type="checkbox" name="bx2" value="100">ミカン<br>
<input type="checkbox" name="bx3" value="50">バナナ<br>
<input type="checkbox" name="bx4" value="200">メロン<br>
<input type="checkbox" name="bx5" value="200">ブドウ<br>
<input type="checkbox" name="bx6" value="150">イチゴ<br>
<input type="checkbox" name="bx7" value="20">スイカ<br>

合計金額:<input type="text" name="result">円

<input type="button" value="合計単位を計算" onclick="ttlValue()">
<input type="reset" value="リセット"><br>
選んだ果物:<input type="text" name="sel" size="50">
</form>

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

【修正箇所】
・script要素にはtype属性が必須です。language属性は古いブラウザ向けで、現在は原則書く必要はありません。

・ローカル変数はvalで宣言しましょう。グローバル空間にはなるべく置かないほうが安全です。

・form要素の終了タグがありませんでしたので、補完しておきました。

質問した人からのコメント

2009/7/22 16:40:33

降参 ご解答ありがとうございます。おかげ様で無事に表示させることができました。
細かな補足や修正もして頂けたようで本当に助かりました…!
これから勉強していきたいと思います。

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる