jQueryで合計を出す方法とは？
- jQueryを使用してHTML内の特定のクラスのテキストフォームの値を合計する方法を教えてください。
- 質問者はHTML内に「pointクラス」があり、その内部のテキストフォームの値を合計したいと考えています。
- 現在、質問者はjQueryを使用して「pointクラス」内のテキストフォームの値を合計しようとしていますが、「NaN」という結果が表示されています。
- ベストアンサー
jQueryで合計を出したい
<table> <tr> <td class="point"><input type="text"></td> <td class="point"><input type="text"></td> <td class="point"><input type="text"></td> <td class="point"><input type="text"></td> </tr> </table> とHTMLで記述していて、jQueryを下記のように記述しました。 var total; j$(".point:text").change(function(){ j$(".point:text").each(function(){ var point = j$(this).val(); total = parseInt(point)+total; }); alert(total); }); alertで返ってくる結果が「NaN」となります。 どのようにすれば合計値が求められるでしょうか。 やりたいことは「pointクラス」内のテキストフォームの値を合計したいです。
- hukazuo
- お礼率82% (188/228)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じで如何でしょう。 <html> <head> <title>テスト</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type='text/javascript'> $(document).ready(function(){ var total; $(".point input:text").change(function(){ total=0; $(".point input:text").each(function(){ var point = $(this).val(); total = parseInt(point)+total; }); alert(total); }); }); </script> </head> <body> <table> <tr> <td class="point"><input type="text" value="0" /></td> <td class="point"><input type="text" value="0" /></td> <td class="point"><input type="text" value="0" /></td> <td class="point"><input type="text" value="0" /></td> </tr> </table> </body> </html>
関連するQ&A
- 同一nameの input type="text" の合計を計算したい
初めて質問させて頂きます。 form 内で同じname名を付けられたテキストフィールドの値の合計を計算し、その値に定数を乗じた値を表示させたいのですが、出来ずに困っております。 name名を別にすれば簡単に出来そうなのですが、このinputが別CGIからの受け取りの関係で数が不定で同一nameが付いてしまいます。（inputは1個以上で上限は無し） CGI側を書き換える事は自分の技術的に不可能なので、このような質問となりました。 以下は自分なりに試行錯誤の末の拙いソースです。 どなたかお分かりになる方、ご教授を宜しくお願い致します。 <html> <head> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> <!-- function kakunin() { var sub = Form.getInputs('form1', 'text'); （ var subtotal = ～～～; ここに上で得た数字を合計するみたいなものがくるのかなと・・・） var total = subtotal * 200; document.form1.field_total.value = total; // 合計を表示 } // --> </script> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> <form action="" name="form1"> <table> <tr><td><input name="kazu" type="text" value="2"></td></tr> <tr><td><input name="kazu" type="text" value="1"></td></tr> <tr><td><input name="kazu" type="text" value="3"></td></tr> <tr><td>・・・増えたりします・・・</td></tr> <tr><td><input type="button" size="8" onclick="kakunin()" value="合計を確認"></td></tr> <tr><td><input type="text" name="field_total" size="30" value="total"></td></tr> </table> </form> </body> </html>
- ベストアンサー
- JavaScript
- IEでjQueryのtoggleが動作しません。
IEでjQueryのtoggleが動作しません。 inputをクリックすることで同じクラス名が与えられている 行を非表示／表示の切替えを行なおうとしています。 FireFox,Safariその他のブラウザでは正常に動作します。 スクリプトの記述に誤りがあるのでしょうか？以下ソースです。 ■JavaScript <script type="text/javascript"> $(document).ready(function(){ $("#sets input").click(function () { var trshow = $(this).attr("class"); $("tr"+"."+trshow).toggle(); } ); }); </script> ■HTML <table id="sets"> <tr> <td>0001 ああああ<br /> <input type="button" class="set01" value="セット内表示/非表示" /></td> </tr> <tr class="set01 set"> <td>サンプルサンプル</td> </tr> <tr class="set01 set"> <td>サンプルサンプル</td> </tr> <tr> <td>0002 いいい<br /> <input type="button" class="set02" value="セット内表示/非表示" /></td> </tr> <tr class="set02 set"> <td>サンプルサンプル</td> </tr> <tr class="set02 set"> <td>サンプルサンプル</td> </tr> </table> ■CSS .set { display: none; }
- ベストアンサー
- JavaScript
- javascriptの記述方法について
こんにちわ。 今、以下のような記述で、kei1～kei5までの合計をtotalに出そうと考えましたが、 function allcalc(){}内に書く記述で困っています。 form名を分けているのは、別の関数で各行の小計（kei1～5）を出すために分けてみましたが、あまり意味がなさそうで一つのform名に変更しようかとも思っています。 <HTML> <HEAD> <TITLE>Test</TITLE> <SCRIPT type="text/javascript"> <!-- function allcalc(total){ var al_total = 0; for (i=1; i <= 10; i++){ elementkei="total.form[" + i +"].element[2].value" if(elementkei != "") {al_total += elementkei} } document.form6.total.value = al_total; } //--> </SCRIPT> </HEAD><BODY><TABLE><FORM name="form1"> <TR><TD><INPUT type="text" name="baika1"></TD> <TD><INPUT type="text" name="suryou1"></TD> <TD><INPUT type="text" name="kei1"></TD> </FORM> <FORM name="form2"> <TR><TD><INPUT type="text" name="baika2"></TD> <TD><INPUT type="text" name="suryou2"></TD> <TD><INPUT type="text" name="kei2"></TD> </FORM> ・・・・・・・・・・・・・これが5つあります <FORM name="form6"> <TR><TD>合計</TD> <TD><INPUT type="text" name="total"> <TD><INPUT type="button" name="go" value="合計計算" OnClick="allcalc(document)"></TD> </FORM></TABLE></BODY></HTML> これを動作させてみると、「total.form[がNullかオブジェクトではありません」とエラーが流れます。 恐らく、allcalcの引数とその参照の仕方が悪いと思うのですが、 書き方を変えてみても、同じようなエラーで止まってしまいます。 どなたか方法を教えていただけないでしょうか。
- ベストアンサー
- JavaScript
- IE8でjQueryのtoggleが動作しません。
IE8でjQueryのtoggleが動作しません。 inputをクリックすることで同じクラス名が与えられている 行を非表示／表示の切替えを行なおうとしています。 同様の内容を、 http://okwave.jp/qa/q6117684.html で質問し、IE7とIE8の互換モードでは動作できるようになりました。 metaタグで強制的に互換モードにする以外に 対処法がありましたら教えてください。 ■JavaScript <script type="text/javascript"> $(document).ready(function(){ $("#sets input").click(function () { var trshow = $(this).attr("className"); $("tr"+"."+trshow).toggle(); } ); }); </script> ■HTML <table id="sets"> <tr> <td>0001 ああああ<br /> <input type="button" class="set01" value="セット内表示/非表示" /></td> </tr> <tr class="set01 set"> <td>サンプルサンプル</td> </tr> <tr class="set01 set"> <td>サンプルサンプル</td> </tr> <tr> <td>0002 いいい<br /> <input type="button" class="set02" value="セット内表示/非表示" /></td> </tr> <tr class="set02 set"> <td>サンプルサンプル</td> </tr> <tr class="set02 set"> <td>サンプルサンプル</td> </tr> </table> ■CSS .set { display: none; }
- ベストアンサー
- JavaScript
- 教えてプログラム
Java Scriptで自動計算を行いたいのですが、うまいくいきません もう少しだと思うのですが、修正をお願いいたします。 在庫確保数＋新規作成数＊単価=合計で算出したいです。 NuNがなるべくでないようにしたいです。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-31J"/> <title>予約登録</title> </head> <script language="javascript"> <!-- var amount = 3; var zei; var goukei; function calc(){ var total=0; var total2=0; var i=0; var go=0; var suti1,suti2; suti1 = document.myForm.d1.value; suti2 = document.myForm.d2.value; go=parseInt(suti1)+parseInt(suti2); while(i<amount*2){ total = total + document.myForm.elements[i].value*document.myForm.elements[++i].value; i++; } document.myForm.itotal.value = total; zei = total * 0.05; zei = Math.floor(zei); goukei = total + zei; document.myForm.goukei.value = goukei*go; } //--> </script> <body onload="calc()"> <FORM name="myForm" method="post"> <h2>予約登録</h2> <h3>商品一覧</h3> <table border="1" width="610"> <tr> <td>商品名</td> <td>単価</td> <td>販売可能数</td> <td>在庫確保数</td> <td>新規作成数</td> <td>金額合計</td> </tr> <tr> <td>稲荷寿司</td> <td>40<Input type="hidden" name="row0v" value="40"></td> <td>50</td> <td><input type="text" name="d1" onChange="calc()" value="0"></td> <td><input type="text" name="d2" onChange="calc()" value="0"></td> <td><input type="text" name="itotal" value="0"></td> </tr> <tr> <td>かんぴょう巻き</td> <td>40<input type="hidden" name="row1v" value="40"></td> <td>50</td> <td><input type="text" name="kanpyou1" onChange="calc()" value="0"></td> <td><input type="text" name="kanpyou2" onChange="calc()" value="0"></td> <td><input type="text" name="itotal2" value="0"></td> </tr> <tr> <td>おにぎり（梅干）</td> <td>90</td> <td>50</td> <td><input type="text" name="umeoni" value="0"></td> <td><input type="text" name="umeoni" value="0"></td> <td><input type="text" name="kanpyou" value="0"></td> </tr> <tr> <td colspan="5" align="right">単品合計金額</td> <td><input type="text" name="goukei" value="0"></td> </tr> </table> <tr> <td colspan="5" align="right">パッケージ合計金額</td> <td><input type="text" name="pakke" value="0"></td> </tr> <tr> <td colspan="5" align="right">総合計金額</td> <td><input type="text" name="sougoukei" value="0"></td> </tr> </table> <br> <br> <input type="submit" value="予約"> </form> </body>
- 締切済み
- JavaScript
- htmlのformの表示について【Jquery】
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript"> function formChanged(ev){ var sel = $('.chk:checked').map(function () { return this.checked ? this.value : null; }).get().join(); $("#output").text(sel); } formChanged(null); $(document).on("change",'.chk:checked',formChanged); </script> <form method="post" action="mail.php"> <table> <tr> <th>カテゴリー</th> <td> ・ABC： <input type="checkbox" name="カテゴリー[]" value="[abc]" class="chk" /> ・DEF： <input type="checkbox" name="カテゴリー[]" value="[def]" class="chk" /> ・GHI： <input type="checkbox" name="カテゴリー[]" value="[ghi]" class="chk" /> </tr> <tr> <th>選択した製品シリーズ</th> <td><span id="output"></span></td> </tr> <tr> </table> </form> これは、チェックボックスにチェックをいれたチェックボックスの値がリアルタイムに表示される仕組みなのですが、逆にチェックを外した場合は、値が消えません。消えるようにするにはどうしたらいいでしょうか。アドバイスをいただけると幸いです。
- 締切済み
- JavaScript
- jQuery 変数の使い方について
jQuery 変数の使い方について 【やりたいこと】 ラジオボタンが複数ある為現在のアクションをまとめたい。 ■ $("input:radio[name='radio01']:checked").val(); の'radio01'の部分に変数を使いたい。 ■document.forms["MON"].hradio02.value の"MON"のフォーム名と、「hradio02」name部分に変数を使いたい。 http://kaicoo.blogspot.jp/2012/03/query_30.html 等を参考に元のソースから JSをまとめてみましたが、うまくいきません。 jQuery内の変数の記述方法を 教えていただけませんでしょうか？ よろしくお願いいたします。 ★JSをまとめたサンプルソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script src="jquery.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function setVal(obj) { var formname = obj.form.name; var radioname = obj.getAttribute('name'); alert(formname); alert(radioname); //選択したラジオのvalueをhiddenに格納する document.forms[formname].h '+ radioname +' .value = $("input:radio[name='+ radioname +']:checked").val(); alert(document.forms[formname].h '+ radioname +'.value); } //--> </script> </head> <body> <table border="1"> <FORM name="MON"> <tr> <td> 結果: </td> <td> <input type="radio" name="radio01" value="良好" onClick="setVal(this);" >良好 <input type="radio" name="radio01" value="不良" onClick="setVal(this);"> 不良 <input type="hidden" name="hradio01" value="未入力です。"> </td> </tr> <tr> <td> 結果2: </td> <td> <input type="radio" name="radio02" value="良好" onClick="setVal(this);" >良好 <input type="radio" name="radio02" value="不良" onClick="setVal(this);"> 不良 <input type="hidden" name="hradio02" value="未入力です。"> </td> </tr> </table> </Form> </body> </html> ★元のソースのサンプル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script src="jquery.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function setVal_01(obj) { document.forms["MON"].hradio01.value = $("input:radio[name='radio01']:checked").val(); alert(document.forms["MON"].hradio01.value); } //--> </script> <script type="text/javascript" language="JavaScript"> <!-- function setVal_02(obj) { document.forms["MON"].hradio02.value = $("input:radio[name='radio02']:checked").val(); alert(document.forms["MON"].hradio02.value); } //--> </script> </head> <body> <table border="1"> <FORM name="MON"> <tr><td> 結果: </td> <td><input type="radio" name="radio01" value="良好" onClick="setVal_01(this);" >良好 <input type="radio" name="radio01" value="不良" onClick="setVal_01(this);"> 不良 <input type="hidden" name="hradio01" value="未入力です。"> </td> </tr> <tr> <td> 結果2: </td> <td> <input type="radio" name="radio02" value="良好" onClick="setVal_02(this);" >良好 <input type="radio" name="radio02" value="不良" onClick="setVal_02(this);"> 不良 <input type="hidden" name="hradio02" value="未入力です。"> </td> </tr> </table> </Form> </body> </html>
- ベストアンサー
- JavaScript
- jQuery テキストボックス読み取り解除
標題について、うまく動作しません。 お手数ですが、ご教授願えたらと思っています。 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4");</script> 仕様：テキストボックスをクリックしたら、読み取り専用が解除される。 ※Ajaxの初期ロード時に各々の項目はreadOnly=true設定 上記が可能なら、その後拡張仕様として、フォーカスアウトした時に 再度 readOnly=trueに設定 html <table> <tr> <td><input type="text" id="code[1]" value="00001"></td> </tr> <tr> <td><input type="text" id="code[2]" value="00002"></td> </tr> <tr> <td><input type="text" id="code[3]" value="00003"></td> </tr> jQuery (function($){ $('input[type="text"]').click(function(){ $(this).attr('readonly','readonly'); }); }); Ajaxの設定は何とかできなのですが、 jQueryの設定がうまくいきません。 どうか宜しくお願い致します。
- ベストアンサー
- JavaScript
- 合計値の表示
コード/品名/単価 01/鰯/10円 02/鮭/20円 というデータがあって --ソースstart-- function codeChange(c, n){ if(document.getElementById){ if(c==01){ document.getElementById("sina"+[n]).innerHTML=("鰯"); }else if(c==02){ document.getElementById("sina"+[n]).innerHTML=("鮭"); } } function suryoChange(s, n){ if(document.getElementById){ if(c==01){ document.getElementById("sum"+[n]).innerHTML=(10*s); }else if(c==02){ document.getElementById("sum"+[n]).innerHTML=(20*s); } }… <table> <tr> <td><input type="text" name="code1" onChange="javascript:codeChange(document.forms(0).code1.value, 1)"></td> <td><div id="sina1"></td> <td><input type="text" name="suryo1" onChange="javascript:suryoChange(document.forms(0).code1.value, 1)"></td> <td><div id="sum1"></td> </tr> <tr> <td><input type="text" name="code2" onChange="javascript:codeChange(document.forms(0).code2.value,2)"></td> <td><div id="sina2"></td> <td><input type="text" name="suryo2" onChange="javascript:suryoChange(document.forms(0).code2.value,2)"></td> <td><div id="sum2"></td> </tr> </table> --ソースend-- <div id="total"></div> で数量の入力値が変わるごとに 各合計のトータルの合計を表示したいのですが やり方がわかりません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jquery input 要素取得
失礼します。現在テーブルに記載されているテキストとinputの要素を取得して配列に格納したいのですが、input要素を取得できません ソースコードはこちらです。ご教授いただけますでしょうか。宜しくお願い致します。 <table id="tbl"> <tr> <td>fdfasdf</td> <td>hfadhfh</td> <td><input type="number" name="number" min='0' max="30" value=""></td> </tr> <tr> <td>hfdaha</td> <td>hfdsahsa</td> <td><input type="number" name="number" min='0' max="30" value=""></td> </tr> </tbody> </table> <script> var data = []; var tr = $("table tr");//全行を取得 for(var i=0, l=tr.length; i<l;i++ ){ //行数分回す var nk = 0; var cells = tr.eq(i).children();//1行目のtrの子要素は取得 for(var j=0, m=cells.length; j < m; j++ ){ //子要素分のcell分回す 0 < cell if(typeof data[i] == "undefined"){ //typeof(型判定) data[i] = []; //data[0] } if(nk < 2){ data[i][j] = cells.eq(j).text();//i行目j列の文字列を取得 data[0][0] ++nk; } data[i][j] = cells.eq(j).val(); } } </script>
- ベストアンサー
- JavaScript
お礼
ありがとうございます。 できました！！！