• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:チェックボックスでの値を足してそれぞれの結果を表示したい)

チェックボックスで値を足して結果を表示

このQ&Aのポイント
  • HTML初心者が90のチェックボックスでそれぞれの結果を表示したい方法を教えてください。
  • JavaScriptのコードでチェックボックスの値を取得し、それぞれの結果を表示できます。
  • 質問者はHTMLを読むことができ、JavaScriptは初心者ですが、助けを求めています。

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

  • ベストアンサー
  • mirurin
  • ベストアンサー率43% (48/111)
回答No.1

2つの名前×3つのチェックボックスでサンプルを作ってみました。 参項にできたらしてください。 --------------------------------------- <SCRIPT type="text/javascript"> <!-- function test(form) { var a,b; a = 0; b = 0; for (i=0; i<3; i++) { if (form.ts1[i].checked) { a += parseInt(form.ts1[i].value); } if (form.ts2[i].checked) { b += parseInt(form.ts2[i].value); } } form.tp1.value = a; form.tp2.value = b; } //--> </SCRIPT> <form name="f1"> a:<INPUT type="checkbox" name="ts1" value="1">1 <INPUT type="checkbox" name="ts1" value="2">2 <INPUT type="checkbox" name="ts1" value="3">3<br> b:<INPUT type="checkbox" name="ts2" value="1">1 <INPUT type="checkbox" name="ts2" value="2">2 <INPUT type="checkbox" name="ts2" value="3">3<br> <INPUT type="button" value="診断" onClick="test(this.form)"><br> a合計:<input type=text name="tp1"><br> b合計:<input type=text name="tp2"><br> </form>

akopi
質問者

お礼

無事解決できました。こんな私ですが丁寧におしえていただき、本当にありがとうございました。これからガンバってもっともっと勉強していきます。ありがとうございました。

akopi
質問者

補足

ご回答いただきありがとうございました。とても参考になりました。というよりあまりにメチャクチャに組んでいたんだなと実感しました。 全てチェックして動作を確認したのですが、どうしてもエラーになってしまいます。 ts3[...]checked はNunまたはオブジェクトではありません  ってどういうことでしょうか。 この意味を教えてください。 よろしくお願いします。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • mirurin
  • ベストアンサー率43% (48/111)
回答No.2

> ts3[...]checked はNunまたはオブジェクトではありません  ってどういうことでしょうか。 ts3というチェックボックスが、例えば3つしかないのに4つ目を見ようとしてるのだと思います。 ts3のチェックボックスの個数と、for文でループする回数は一致していますか?

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • チェックボックスの値について

    こんばんは。 チェックボックスの値の加工で悩んでいます。 【やりたいこと】 チェックボックスのvalueを加工し表示しています。 重複している文言は表示しないようにしたいです。 現在の値を変数に入れておいて、forの中で判定させる?のでしょうか? 参考URL等あれば教えていただけませんでしょうか? よろしくお願いいたします。 【現状valueの値を下記のように表示しています。】 ■日本北海道  ××区  ・ああ町 ■日本北海道  ××区  ・いい町 ■日本北海道  ××区  ・うう町 ■日本北海道  YY区  ・ええ町 ■日本東京都  YY区  ・AA町 ■日本東京都  YY区  ・BB町 ■日本東京都  ZZ区  ・BB町 ■日本東京都  ZZ区  ・BB町 【こんな感じで重複している文言は表示しないようにしたいです。】 ■日本北海道  ××区  ・ああ町  ・いい町  ・うう町 ■日本北海道  YY区  ・ええ町 ■日本東京都  YY区  ・AA町  ・BB町 ■日本東京都  ZZ区  ・BB町 ●if1つ前の値と比較して、重複を消せるかと思ったのですがうまくいきませんでした。 function textcopy(){ var word01; var word02; var word03; var word04; naiyo = ''; for(i=0; i<document.f.a1.length; i++){ if(document.f.a1[i].checked){ source = (document.f.a1[i].value); kekka = source.split("*"); if((kekka[0])==(word01)){ kekka[0]=""; } if((kekka[1])==(word02)){ kekka[1]=""; } if((kekka[2])==(word03)){ kekka[2]=""; } naiyo = naiyo + kekka[0] + kekka[1] +'\n'+' ' + kekka[2] +'\n'+ ' '+ '・'+ kekka[3] + '\n'; word01= kekka[0]; word02= kekka[1]; word03= kekka[2]; word04= kekka[3]; } } document.f.log.value = naiyo ; } 【サンプルソース】 <!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"> <title></title> <script type="text/javascript" language="JavaScript"></script> <SCRIPT TYPE="text/javascript"> <!-- function textcopy(){ naiyo = ''; for(i=0; i<document.f.a1.length; i++){ if(document.f.a1[i].checked){ source = (document.f.a1[i].value); kekka = source.split("*"); naiyo = naiyo + kekka[0] + kekka[1] +'\n'+' ' + kekka[2] +'\n'+ ' '+ '・'+ kekka[3] + '\n'; } } document.f.log.value = naiyo ; } --> </SCRIPT> </head> <body> <form name="f"> <input type="checkbox" name="a1" value="■日本*北海道*××区*ああ町">ああ町<br> <input type="checkbox" name="a1" value="■日本*北海道*××区*いい町">いい町<br> <input type="checkbox" name="a1" value="■日本*北海道*××区*うう町">うう町<br> <input type="checkbox" name="a1" value="■日本*北海道*YY区*ええ町">ええ町<br> <input type="checkbox" name="a1" value="■日本*東京都*YY区*AA町">AA町<br> <input type="checkbox" name="a1" value="■日本*東京都*YY区*BB町">BB町<br> <input type="checkbox" name="a1" value="■日本*東京都*ZZ区*BB町">BB町<br> <input type="checkbox" name="a1" value="■日本*東京都*ZZ区*CC町">CC町<br> <input type="button" value="確認" onclick="textcopy()"><br> <textarea name="log" rows="21" cols="84" id="image1"> </textarea> </form> </body> </html>

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

    こんにちは 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>

  • 複数あるチェックボックスの入力チェックするには?

    チェックボックスの入力チェックスクリプトを探しており、下記のようなスクリプトをネット検索で見つけました。 <!-- <script type="text/javascript"> function chNull(msg,obj) { if(!obj) return true; if((obj.type || obj[0].type) == 'checkbox'){ var flag = 0; if(obj.length){ for(var i=0; i<obj.length; i++) { if(obj[i].checked) flag = 1; } } else { if(obj.checked) flag = 1; } if(flag == 0) { alert(msg + 'を選択してください。'); return false; } } return true; } --> </script> <form method="POST" action="■.cgi" onSubmit="return chNull('チェックボックス',a);"> <input type="checkbox" name="a" value="A1" />A1 <input type="checkbox" name="a" value="A2" />A2 </form> 同じnameのチェックボックス群がひとつしかないときはこれで問題ないのですが、 下記のようにnameが複数ある場合にはこのスクリプトのどの部分を変えればよいのでしょうか? <input type="checkbox" name="a" value="A1" />A1 <input type="checkbox" name="a" value="A2" />A2 <input type="checkbox" name="b" value="B1" />B1 <input type="checkbox" name="b" value="B2" />B2 <input type="checkbox" name="c" value="C1" />C1 <input type="checkbox" name="c" value="C2" />C2 できればこのスクリプトをベースとして使用したいと思っています。どなたかお分かりの方がいらっしゃいましたらお教え下さいませ。 よろしくお願い致します。

  • 複数のラジオボタンのチェック

    複数のラジオボタンが全て選択されているかどうかのチェックのJavaScriptをすっきりした形で書くのは、どうしたらいいでしょうか? 下記のようですと、ダラダラと記述するようになってしまいます。 どなたかご教授ください。 --------------------------------------- <script type="text/javascript"> function insert_onClick() { j=0; for (i=0 ;i < document.F1.a11.length ; i++){ if (document.F1.a11[i].checked) { j=1; } } } </script> <form action="check.php" name="F1" onsubmit="return insert_onClick()"> 各valueは0~4まであります <input type="radio" name="a11" value="0"> <input type="radio" name="a12" value="0"> <input type="radio" name="a21" value="0"> <input type="radio" name="a22" value="0"> <input type="radio" name="b11" value="0"> <input type="radio" name="b12" value="0"> <input type="radio" name="b21" value="0"> <input type="radio" name="b22" value="0"> ---------------------------------------

  • チェックボックスで画像を一括表示

    下記サイトを参照して、 「チェックボックスのON / OFFで画像を表示する」 「全てのチェックボックスのON / OFFを切り替える」 を組み合わせて、 「全てのチェックボックスのON / OFFを切り替えて画像の一括表示」をしたいのですが、全てのチェックボックスのON / OFFの切り替えはできるのですが、それに伴って画像の表示・非表示までは反応しませんでした。各チェックボックスのON / OFFでの画像の表示・非表示は可能です。 http://iswebmag.hp.infoseek.co.jp/sample163.html http://iswebmag.hp.infoseek.co.jp/sample164.html ▼htmlソースです。 <FORM name="f1"> <INPUT type=checkbox name="f1" onClick="show(0,'img01')">朝焼に輝く星<BR> <INPUT type=checkbox name="f1" onClick="show(1,'img02')">木立の隙間から<BR> <INPUT type=checkbox name="f1" onClick="show(2,'img03')">夜明け<BR> <INPUT type=checkbox name="f1" onClick="show(3,'img04')">自転を感じる<BR> <INPUT type=checkbox name="f1" onClick="show(4,'img05')">昼の星空<BR> <INPUT type=checkbox name="f1" onClick="show(5,'img06')">砂丘の月<BR> <INPUT type=checkbox name="f1" onClick="show(6,'img07')">月の軌跡<BR> <INPUT type=checkbox name="f1" onClick="show(7,'img08')">彗星の飛来<BR> <INPUT type=checkbox name="f1" onClick="show(8,'img09')">彗星 <BR> <INPUT type=button value="全てOn" onClick="all_on(this.form.f1)"> <INPUT type=button value="全てOff" onClick="all_off(this.form.f1)"> </FORM> ▼チェックボックスのON / OFFで画像を表示するJavaScript <SCRIPT language="JavaScript"> <!-- function show(c,img){ if(document.f1.elements[c].checked == true){ document.getElementById(img).style.width=200; } else { document.getElementById(img).style.width=0; } } // --> </SCRIPT> ▼全てのチェックボックスのON / OFFを切り替えるJavaScript <SCRIPT language="JavaScript"> <!-- function all_on(chk){ for (i = 0; i < chk.length; i++) { chk[i].checked = true; } } function all_off(chk){ for (i = 0; i < chk.length; i++) { chk[i].checked = false; } } // --> </SCRIPT>

  • チェックボックスの表示・非表示 動作

    はじめまして。 初めて掲示板を利用させていただきます。javascriptを勉強しまだ日が浅いのでご存知の方がいらっしゃれば教えてください。 今、チェックボックスを選択し選択した項目がアクティブになるようにしたいのですが、選択項目が重複すると以下のようになってしまいました。 A+AB=AB A+AB+E=ABE 個々までは問題なし。 既に全てのチェックが付いた上体で、ABCE-A=BCE となってしまい、 ABのチェックが入っていても、Aが消えてしまいます。 以下に現在のコードを張ります。 <script type='text/javascript'> <!-- function fchk2(obj, name) { var frm=obj.form; if(obj.checked==true) { /* チェックボックスが選択されている場合は、   テキストボックスを有効化(false)*/ for(var i=1; i<=3; i++){ frm.elements[name+i].disabled=false; } } else { for(var i=1; i<=3; i++){ /* 無効化する前に、入力値をクリア */ if(name=='t'){ /* テキストボックスの場合 */ frm.elements[name+i].value=''; }else{ /* チェックボックスの場合 */ frm.elements[name+i].checked=false; } /* 無効化(true) */ frm.elements[name+i].disabled=true; } } } //--> </script> <form name='form2' action='#'> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t")' checked>A<br> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t");fchk2(this,"b");' checked>AとB<br> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t");fchk2(this,"e");' checked>AとE<br> <input type='checkbox' name='chk2' value='1' onclick='fchk2(this,"c");fchk2(this,"e");' checked>CとE<br> <br> A<input type='text' name='t1' value='テキストA'><br> A<input type='text' name='t2' value='テキストB'><br> A<input type='text' name='t3' value='テキストC'><br> <br> B<input type='text' name='b1' value='テキストA'><br> B<input type='text' name='b2' value='テキストB'><br> B<input type='text' name='b3' value='テキストC'><br> <br> <input type='checkbox' name='c1' value='1'> 選択肢C<br> <input type='checkbox' name='c2' value='1'> 選択肢C<br> <input type='checkbox' name='c3' value='1'> 選択肢C<br> <br> <input type='checkbox' name='e1' value='1'> 選択肢E<br> <input type='checkbox' name='e2' value='1'> 選択肢E<br> <input type='checkbox' name='e3' value='1'> 選択肢E </form> よろしくお願いいたします。

  • チェックボックス とラジオボタンの値取得について

    チェックボックス とラジオボタンの値取得について こんにちは チェックボックスの中にラジオボタンがある場合に チェックボックスの値に続けてラジオボタンの値を表示したいのですが、 うまくいかず悩んでいます。 【やりたいこと】 □そのた2をチェクして男性を選択した場合 「そのた2 男性」と表示したい。 例 そのた1 そのた2 男性 そのた4 そのた5 女性 サンプルのチェックボックスのlabelタグをはずすと $(vals[i]).next($("input[name='radio']:checked").val()); で値を取得できたのですが、 labelタグを付けたまま値を取得することは可能でしょうか? labelタグをつけたまま、 $(vals[i]).find($("input[name='radio']:checked").val()); でやってみたのですが、undefindがでてしまいました。 サンプルではチェックボックスの数は1個ですが、 □が30個以上 のチェックボックスが50個くらいあるので、 1回の記述で済ませたいのですが、 ラジオボタンが隣にあったら値を取得する のようにできるのでしょうか? 何かよい方法があれば教えて頂けないでしょうか。 よろしくお願い致します。 ■サンプルソース <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script type="text/javascript" language="JavaScript"></script> <script language="javascript"> <!-- function textb(){ var str=""; var vals = document.forms['f'].elements['q1']; for(i=0; i<vals.length; i++){ if(vals[i].checked){ str=str + vals[i].value + '\n'; } } document.f.log.value=str; } --> </script> <title></title> </head> <body> <form name="f"> <div>アンケート<br> <label for="1"><input type="checkbox" name="q1" class="chex" id="1" value="その1"> その1</label><br> <label for="2"><input type="checkbox" name="q1" class="chex" id="2" value="その2"> その2</label> <input type="radio" name="radio1" value="可">男性 <input type="radio" name="radio1" value="否">女性 <br> <label for="3"><input type="checkbox" name="q1" class="chex" id="3" value="その3"> その3</label><br> <label for="4"><input type="checkbox" name="q1" class="chex" id="4" value="その4"> その4</label><br> <label for="5"><input type="checkbox" name="q1" class="chex" id="5" value="その5"> その5</label> <input type="radio" name="radio2" value="可">男性 <input type="radio" name="radio2" value="否">女性 <br> </div> <input type="button" value="確認" onclick="textb()"> <input type="reset" value="クリア"> <br> <textarea name="log" rows="4" cols="50"></textarea></form> </body> </html>

  • チェックボックスの未入力チェック

    ざっとですけれども <form action="**" name="myform" onsubmit="return Check()" method=post> <input type="checkbox" name="Erasedata" id="Erasedata" value="1" > <input type="checkbox" name="Erasedata" id="Erasedata" value="2" > ・・・ <input type="checkbox" name="Erasedata" id="Erasedata" value="5" > <input type="submit" value="選択されたものを削除する"> このようなチェックボックスがあったとして function Check() { for (i=0;i<document.myform.length;i++)  {   if(document.myform.Erasedata[i].checked==true) {return true;}  } alert("どこかにチェックを入れて下さい "); return false; } といった感じで未入力チェックをしています。 チェックボックスが複数の場合はうまく動くのですが、チェックボックスがひとつだとうまくいきません。スクリプトで何か問題があるようでしたらご指摘お願いできませんでしょうか。よろしくお願いいたします。

  • 現在javascriptでチェックボックスで選択した項目のvalueを

    現在javascriptでチェックボックスで選択した項目のvalueを次ページに渡すものを作成しています。 1つだけ選択すると正常に値が動くのですが、複数選択すると後に選択したほうの値だけが入ってしまいます。 複数選択した場合に選択した全てのvalueが入るようにするにはどうしたらいいでしょうか? 【1ページ目ソース】 <html> <head> <title>1page</title> </head> <body> <form name="F1" onsubmit="window.open('2page.html','_blank','');return false;"> A<input type="text" id="tanka1"> B<input type="checkbox" name="che1" id="check1" value="1">1 <input type="checkbox" name="che1" id="check1" value="2">2 <input type="checkbox" name="che1" id="check1" value="3">3 <input type="submit" value="送信" onclick=check();></form> </body> </html> 【2ページ目ソース】 <html> <head> <title>2page</title> <script> window.onload=function (){ document.F2.tanka1.value=window.opener.document.F1.tanka1.value; if (window.opener.document.F1.che1[0].checked)document.F2.check1.value=1; if (window.opener.document.F1.che1[1].checked)document.F2.check1.value=2; if (window.opener.document.F1.che1[2].checked)document.F2.check1.value=3; } </script> </head> <body> <form name="F2"> A<input type="text" id="tanka1"> B<input type="text" id="check1"> <br><br> </body> </html>

  • javascriptでチェックボックスの選択状況をチェックする方法につ

    javascriptでチェックボックスの選択状況をチェックする方法について質問です。 チェックボックスを <input type="checkbox" name="chk[]" value="1"> <input type="checkbox" name="chk[]" value="2"> のようにした場合、チェックボックスが1か所以上選択されているかどうかは、 var count = 0; for (var i=0;i<document.myform.elements['chk[]'].length;i++){ if(document.myform.elements['chk[]'][i].checked){ count++; } } if(count==0){ window.alert("チェックしてください!"); } のようにすればチェック可能ですが、inputタグで <input type="checkbox" name="chk1[]" value="1"> <input type="checkbox" name="chk1[]" value="2"> <input type="checkbox" name="chk2[]" value="A"> <input type="checkbox" name="chk2[]" value="B"> のように「name」の配列名が変化する場合はどのようにすればチェック可能でしょうか?