• ベストアンサー

[javascript] checkboxによる合計の算出と表示について

こんにちわ。 表記についてですが、javascriptによるcheckboxのvalue値を算出させようと悪戦苦闘しております・・・。 皆様のお知恵を拝借できればと思います。 至らない部分が多々あると思いますが下記に現在のソースを貼り付けますので、色々とご指摘いただければ幸いです。 （リアルタイム表示のためprototypeを使用しています。） <head><script src="prototype.js" type="text/javascript"></script> <script language="javascript"> function mprice(){ chn = 6; ttl = 0; for(i=0; i<chn; i++) { if(document.step2.elements[i].checked==true) { var pttl = ttl + eval(document.step2.elements[i].value); } else if(typeof(pttl) == "undefined") pttl = 0; } document.getElementById('pttlr').innerHTML = pttl + "円" } </script> </head> <body> <form name="step2"> <input type="checkbox" value="105" id="food" onClick="mprice()">コーラ<br /> <input type="checkbox" value="315" id="food" onClick="mprice()">肉<br /> <input type="checkbox" value="1050" id="book" onClick="mprice()">参考書<br /> <input type="checkbox" value="210" id="sweet" onClick="mprice()">飴<br /> <input type="checkbox" value="525" id="book" onClick="mprice()">マンガ<br /> <input type="checkbox" value="3150" id="music" onClick="mprice()">CD<br /> </form> <div id="pttlr">

質問者が選んだベストアンサー

  • ベストアンサー
  • nidoking
  • ベストアンサー率69% (18/26)
回答No.1

まず、本題とは関係ありませんが、このスクリプトだけなのであれば、"prototype.js"は必要ありません。 本題です 合計のための変数に、ttlを用意してあるのに、 pttlをサマリー中で使っているのはなぜですか? pttlとttlが混在しており、このままでは、チェックされた商品の最後の価格のみとなります。 pttlを使わずに、pttl -> ttlへ変更したら、 ちゃんと動くようですよ。

shadowdragon
質問者

お礼

早速のご丁寧なご回答を頂きありがとうございます。 なるほど。言われてみれば・・・。 まだまだ勉強が足りませんね。ありがとうございます。 HTML中に埋め込み、divタグで表示させたいのですが、この場合でもprototypeは必要なさそうでしょうか？

その他の回答 (1)

noname#246547
noname#246547
回答No.2

チェックされた項目の合計を算出したいのでしょうか？ function mprice(){ chn = 6; ttl = 0; for(i=0; i<chn; i++) { if(document.step2.elements[i].checked==true) { ttl += eval(document.step2.elements[i].value); } } document.getElementById('pttlr').innerHTML = ttl + "円" } では？

shadowdragon
質問者

お礼

ご丁寧なご回答をいただきありがとうございます。 なるほど。そうですね。 こうして色々な方に見ていただけるとどんどん省略化されていくのは面白いですね。 ありがとうございます。勉強になります。

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

関連するQ&A

  • javascript checkbox

    完全に初心者です。。 下記のスクリプトをもとに、 ■チェックAをチェックしたら全てチェックされる ■またチェックAをチェックしたら全て外れる ようにしたいです。。 でも何がダメか分かりません。。 一部を書くのではなく出来ればスクリプト全ていただけたらと思います。 あともし宜しければチェックAをチェックしたら、１～６をチェックできないようにもしたいです。。 ご教授よろしくお願いします。。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE></TITLE> <SCRIPT language="JavaScript"> function check(){ for(i=1; i<7; i++){ document.form1.elements[ch[i]].checked = true; } } </SCRIPT> </HEAD> <BODY> 全てのチェックボックスをチェック/解除 <FORM name="form1"> <p><INPUT type="checkbox" id="ch" onclick="check()">チェックＡ</p> 　　<INPUT type="checkbox" id="ch1">チェック１ 　　<INPUT type="checkbox" id="ch2">チェック２ 　　<INPUT type="checkbox" id="ch3">チェック３<BR><BR> 　　<INPUT type="checkbox" id="ch4">チェック４ 　　<INPUT type="checkbox" id="ch5">チェック５ 　　<INPUT type="checkbox" id="ch6">チェック６<BR><BR> 　　<BR> </FORM> </BODY> </HTML>

  • checkboxを全てcheckを画像ボタンで

    一つのフォームの中に、複数のcheckboxのグループがあって そのグループ毎に、全てチェック、解除ボタンをつけているのですが それを画像のボタンで実現したいのですが、どのようにしたらいいでしょうか？ *通常のボタンでは動作していますが、画像をボタンにした時に動作しません。 チェックを入れて、その場面にとどまって欲しいのに 画像で作るとチェックを入れて、検索してしまいます。 以下、現在と、画像ボタンのうまく動かないものも書いています。 よろしくお願いいたします。 <SCRIPT language="JavaScript"> <!-- // チェックボックスに使用している名前 chn1 = new Array("bukken_ID[1]","bukken_ID[2]"); // 全てのチェックボックをチェックする function chBxOn1(){ for(i=0; i<chn1.length; i++) { document.nForm.elements[chn1[i]].checked = true; } } // 全てのチェックボックのチェックを外す function chBxOff1(){ for(i=0; i<chn1.length; i++) { document.nForm.elements[chn1[i]].checked = false; } } //--> </SCRIPT> <SCRIPT language="JavaScript"> <!-- // チェックボックスに使用している名前 chn = new Array("ku_area[1]","ku_area[2]"); // 全てのチェックボックをチェックする function chBxOn2(){ for(i=0; i<chn2.length; i++) { document.nForm.elements[chn2[i]].checked = true; } } // 全てのチェックボックのチェックを外す function chBxOff2(){ for(i=0; i<chn2.length; i++) { document.nForm.elements[chn2[i]].checked = false; } } //--> </SCRIPT> <form id="form2" name="nForm" method="post" action="#"> <input type="checkbox" name="bukken_ID[1]" id="bukken_ID" value="1" /> マンション <input type="checkbox" name="bukken_ID[2]" id="bukken_ID" value="2" /> 一戸建て <input type="button" value="全てチェックを入れる" onclick="chBxOn1()" /> <input type="button" value="チェック解除" onclick="chBxOff1()" /> <input type="checkbox" name="ku_area[1]" id="ku_area" value="1"/>住所１ <input type="checkbox" name="ku_area[2]" id="ku_area" value="2"/>住所２ <input type="button" value="全てチェックを入れる" onclick="chBxOn2()" /> <input type="button" value="チェック解除" onclick="chBxOff2()" /> <input type="submit" name="button3" id="button3" value="以上の条件で検索" /> </form> 以下、うまく動かない画像のボタンです。 <input type="image" src="img/allcheck1.gif" alt="全てチェックを入れる" onClick="chBxOn1()"> <input type="image" src="img/riset.gif" alt="チェック解除" onClick="chBxOff1()">

  • checkbox ループ

    下記のスクリプトだと、 デバックが１６になってしまいます。 これをどうにかして、 ＡをチェックしたらＡ内だけをループ、 ＢをチェックしたらＢ内だけをループさせたいんですが、 どこをどのように修正すればいいですか？？ スクリプトをかなり変えるのは避けたいです。。 教えてください。。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE></TITLE> <SCRIPT language="JavaScript"> function check(n){ document.getElementById('debug').innerHTML = "デバッグ情報"; document.getElementById('debug').innerHTML = document.getElementById('debug').innerHTML + "<br>lengthは" + document.form1.length; for(i=1; i<=document.form1.length; i++){ if(document.form1.elements["ch" + n].checked){ document.form1.elements["ch" + n + "-" + i].checked = true; document.form1.elements["ch" + n + "-" + i].disabled = true; }else{ document.form1.elements["ch" + n + "-" + i].checked = false; document.form1.elements["ch" + n + "-" + i].disabled = false; } } } </SCRIPT> </HEAD> <BODY> 全てのチェックボックスをチェック/解除 <FORM name="form1"> <p><INPUT type="checkbox" id="ch1" onclick="check(1)">チェックＡ</p> <INPUT type="checkbox" id="ch1-1">チェック１ <INPUT type="checkbox" id="ch1-2">チェック２ <INPUT type="checkbox" id="ch1-3">チェック３<BR><BR> <INPUT type="checkbox" id="ch1-4">チェック４ <INPUT type="checkbox" id="ch1-5">チェック５ <INPUT type="checkbox" id="ch1-6">チェック６<BR><BR> <BR> <p><INPUT type="checkbox" id="ch2" onclick="check(2)">チェックＢ</p> <INPUT type="checkbox" id="ch2-1">チェック１ <INPUT type="checkbox" id="ch2-2">チェック２ <INPUT type="checkbox" id="ch2-3">チェック３ <INPUT type="checkbox" id="ch2-4">チェック４<BR><BR> <INPUT type="checkbox" id="ch2-5">チェック５ <INPUT type="checkbox" id="ch2-6">チェック６ <INPUT type="checkbox" id="ch2-7">チェック７ <INPUT type="checkbox" id="ch2-8">チェック８<BR><BR> <BR> </FORM> <p id="debug"></p> </BODY> </HTML>

  • Javascriptでフィールドを埋める方法

    Javascript初心者です。 HTML <input type="text" id="hoge" value="piyo"> <input type="checkbox" onclick="AutoFill();" > <input type="text" id="foo" value=""> Javascriptでcheckboxをクリックすると、fooというidを持つテキストフィールドの値をhogeというidを持つテキストフィールドと同じ値で埋めたいと思います。 bodyの終りに <script> AutoFill(){ document.elementGetById(foo).value=document.elementGetById(hoge).value; } </script> checkboxをクリックしても何も起こらない。どうすればいいんですか。 ご回答をよろしくお願いいたします。

  • checkbox 特定項目だけを、チェックするには

    こんにちは。いつもお世話になります。 checkbox内で、同じnameの中から特定のものだけ チェックさせるにはどうしたら良いでしょうか。 条件として、name='or52'の部分は変更出来ません。 <input type='button' value='A,B,Cだけを同時にチェック' onclick='checkAll();'> <form action='xxx.cgi' method='post' name='f1'> <input name='or5' type='checkbox' value='A'><br> <input name='or5' type='checkbox' value='B'><br> <input name='or5' type='checkbox' value='C'><br> <input name='or5' type='checkbox' value='D'><br> <input name='or5' type='checkbox' value='E'><br> <input name='or5' type='checkbox' value='F'><br> ......... </form> それで、こんなのをウェブから探してきました。 function checkAll() { for (i=0; i<7; i++) document.f1.elements["or52"+i].checked = true; } そして、同時にチェックしたいものだけ下記の様にしました。 <input name='or52' type='checkbox' value='A' id='or51'> <input name='or52' type='checkbox' value='B' id='or52'> <input name='or52' type='checkbox' value='C' id='or53'> 取りあえずできますが、エラーがでます。 「document.f1.elements["..."]は、objまたはnullではない！」 どうか教えて下さい。よろしくお願いします。

  • javascriptのtextbox

    こんばんは。 <html> <body> <center> <br><br> <form name="fuji"> TEXT BOX<br> <input type="text" name="tex"> </form> <SCRIPT type="text/javascript"> var i; i="ABC" document.write("<input type='button' value='↑を変数iに代入' onClick='i=(document.fuji.tex);'>"); document.write("<br><input type='button' value='表示' onClick='document.write(i);'>"); </SCRIPT> </center> </body> </html> でテキストボックスの中身を表示させたいのですが、 上手くいきません。どうすればいいのでしょうか。 また、変数を使わずに直接テキストボックスの中身を 表示させる事はできるのでしょうか。 教えてください。

  • checkboxの選択数制限と排他処理について

    javascript初心者です。よろしくお願い致します。現在チェックボックスを使用したクイズサイトを作成しており、回答が５つの中から正しいものをチェックし送信するというものです。 その中で、正解数（今回は2つ）以上にチェックをした時に最初にチェックした方のチェックボックスのチェックが外れるという仕組みを組み込む事になりました。 選択数に制限をかけることや排他処理（ラジオボタン）は理解できるのですが、上記の実現方法がどうしても分からず質問させていただきました。 どうかよろしくお願い致します。 <html> <head> <script type="text/javascript"> function check(f,o,m){ var c = i = 0, b = f.elements; for (i; i < b.length; i++) if(b[i].type&&b[i].type=='checkbox'&&b[i].checked&&b[i].parentNode.id==o) c++; for (i = 0; i < b.length; i++) if(b[i].type&&b[i].type=='checkbox'&&!b[i].checked&&b[i].parentNode.id==o) b[i-2].checked=false;// これだと２つ前ではなく2番目のチェックボックスが排他になります。 } </script> </head> <body> <form action="#" id="sampleform" onclick="check(this,'options',2);"> <fieldset id="options"><input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> </fieldset> </form> </body> </html>

  • JavaScriptでcheckboxの入力個数制限

    以下のようなチェックボックスがあります。 ３つ以上チェックできないようにしたいのですが、JavaScriptで可能でしょうか？ <FORM method=POST action="aaa.cgi" name="FORM1"> <input type="checkbox" name="Q1" value="1">1<br> <input type="checkbox" name="Q2" value="1">2<br> <input type="checkbox" name="Q3" value="1">3<br> <input type="checkbox" name="Q4" value="1">4<br> <input type="checkbox" name="Q5" value="1">5<br> </form>

  • localStorageでのcheckbox制御

    下記記載のプログラムをこちらから改変して作成しました。 http://jsdo.it/twi_masa/hx8D 質問1 保存を押すとtrueかfalseの値が保存されますが、ページ読み込み直後にtrueだったらチェックあり。falseだったらチェックなしの状態にするにはどのように書けばよろしいでしょうか。 質問2 チェックボックス2も1と同様に使いたいのですが、どのように書けばよいのかわかりません。 よろしくお願いします。 <table> <tr> <td>チェックボックス</td> <td> <input type="checkbox" id="checkbox1" value="0">チェック1 <input type="checkbox" id="checkbox2" value="0">チェック2 </td> </tr> </table> <input type="button" value="保存" onclick="hx8D.save();"> <script> var hx8D = function(){ var HX8D = function(){ }; HX8D.prototype = { save : function(){ var elements = document.getElementsByTagName("input"); for(var i=0; i<elements.length; i++){ var type = elements[i].type; var key = elements[i].id; if(type == "text"){ localStorage[key] = elements[i].value; }else if(type == "checkbox"){ localStorage[key] = elements[i].checked; document.getElementsByName("checkbox1")[i].checked = true; } } }, }; return new HX8D(); }(); </script>

  • javascript 「折りたためるリスト」

    javascript初学者です。 「折りたためるリスト」について、皆さまにお教え頂きたいことがあり投稿しました。 以下のプログラムのような「折りたためるリスト」があると仮定します。「野菜すべて」をクリックすると、「大根、にんじん、レタス」が表示される折りたためるリストです。 通常、折りたたまれたリストを表示した後にリロードすればリストがたたまれてしまいますが、リロードしてもなおリストがたたまれず、「大根、にんじん、レタス」が表示された状態のままにするにはプログラムをどのように改良すればよいでしょうか。 （例：大根とにんじんにチェックを付けた後にリロードすると、リストがたたまれてしまうため何にチェックが付いているのかわからなくなってしまいます。リロードしてもリストが閉じることなく、リストを表示したままにしたい、と一生懸命やっているのですが、私のjavascriptの知識では解決できないのです(涙)。） なにぶんjavascriptが苦手でどうにもお手上げ状態です。 大変お手数をお掛けしますが、どうぞよろしくお願いいたします。 「折りたためるリスト」プログラム ----------------------------------------------------------------------- <html> <body> <input id="all" name="test1" type="checkbox" value="1"><a href="URL" onclick="oritatami('1');return false">野菜すべて</a><br> <div id="1" style="display:none"> 　　<input name="test1" type="checkbox" value="10">大根<br> 　　<input name="test1" type="checkbox" value="11">にんじん<br> 　　<input name="test1" type="checkbox" value="11">レタス<br> </div> <script type="text/javascript"> function oritatami(id){ obj=(document.all)?document.all(id):((document.getElementById)?document.getElementById(id):null); if(obj) obj.style.display=(obj.style.display=="none")?"block":"none"; } </script> </body> </html> -----------------------------------------------------------------------

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する