• ベストアンサー

チェックボックス、セレクトボックスを組み合わせた複雑な計算表を作りたい

下記のような条件を満たす計算表を作りたいのですが、どのように作っていけばいいのか、さっぱり分かりません。 殆ど初心者に近い状態で、このような複雑な計算表を作るのは不可能に近いのは分かっているのですが、是非、ご教授願いたいと思い、質問させて頂きたいです。 <html> <head> <title></title> </head> <body> <form name=all> <table> <tr> <td colspan=2>a</td> <td colspan=7> <input name=AA type=checkbox>AA　<input name=BB type=checkbox>BB </td> </tr> <tr> <td colspan=2>b</td> <td colspan=7> <input name=CC type=checkbox>CC　<input name=DD type=checkbox>DD </td> </tr> <tr> <td colspan=2>c</td> <td colspan=7><input name=nn type=text></td> </tr> <tr> <td colspan=2>d</td> <td colspan=7> <input name=EE type=checkbox>EE　<input name=FF type=checkbox>FF　<input name=GG type=checkbox>GG　<input name=HH type=checkbox>HH </td> </tr> <tr> <td colspan=2>eA</td> <td colspan=7><input name=PP type=checkbox>PP</td> </tr> <tr> <td rowspan=5>eB</td> <td>e1</td> <td>i1</td> <td colspan=3> <select name=i1> <option>1</option> <option>2</option> </select> </td> <td>I2</td> <td colspan=2> <select name=i2> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td>e2</td> <td>J1</td> <td colspan=3> <select name=j1> <option>1</option> <option>2</option> </select> </td> <td>J2</td> <td colspan=2> <select name=j2> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td>e3</td> <td>K1</td> <td colspan=3> <select name=k1> <option>1</option> <option>2</option> </select> </td> <td>K2</td> <td colspan=2> <select name=k2> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td>e4</td> <td colspan=7> <select name=l1> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td>f5</td> <td colspan=7> <select name=m1> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td colspan=2>f</td> <td>f1</td> <td colspan=3><input name=oo type=text></td> <td>f2</td> <td colspan=2><input name=pp type=text></td> </tr> </table> <br> <input name=keisan1 type=submit value=計算1>　 <input name=clear1 type=reset value=クリア1> </form> <br> <table><tr> <td colspan=9> a～dの計<input type=text name=qq>-f1<input type=text name=rr>=ABC<input type=text name=ss> </td> </tr> <tr> <td colspan=9> eA+eBの計<input type=text name=tt>-f2<input type=text name=uu>=DEF<input type=text name=vv> </td> </tr> <tr> <td colspan=9>ABC+DEFの計<input type=text name=ww>×dで選択したときの代入数字=<input type=text name=xx></td> </tr> </table> <br> <input name=kei2 type=submit value=計算2>　<input name=clear2 type=reset value=クリア2> </center> </body> </html> 条件として、 ・「a～d」は、必ず入力 ・「e～f」は、該当する場合にのみ ・チェックボックスの行は、どれか1つだけを必ず選択（複数選択した場合、注意を促す） ・セレクトボックスの行は、 該当する場合のみ ・最後に「計算」ボタンを押した時に、未入力の部分（a～d）の注意を促す 計算なのですが、 1．「a」のAAを選択、「b」のCCを選択、「c」に20を入力、「d」のEEを入力したときの場合の計算 その時、「d」のEEには10を代入という形で計算したい。（他のFF=20,GG=30,HH=40） ※「a」のBBを選択した場合は、「d」のEE=15,FF=17,GG=22,HH=27となった場合も 2．上記の条件に加え、「eB」の「e1」は1、「e2」も1を選択、「e4」は2を選択した時の計算 その時、「e1」には「100」を代入、「e2」は「150」を代入、「e4」には「80」を代入で計算したい 3．上記「2」の条件に加え、「f1」に150、「f2」に70と入力した場合、「a～d」の計算合計から「f1」を引き、「e」のAとBの計算合計から「f2」を引く 長くて条件等も分かりづらいかもしれませんが、宜しくお願いします。

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

  • ベストアンサー
  • leap_day
  • ベストアンサー率60% (338/561)
回答No.4

こんにちは 代入値や計算が合っているかの確認はしていませんが・・・ <style type="text/css"> .left { float:left; width:60px; } .left2 { float:left;width:120px; } .right { float:left; } .clear { clear:both; } .colum { float:left; width:30px; } .error { color:red; display:none;} </style> <script type="text/javascript"><!-- function check() { //a～d項目入力チェック// for(flag1=0,i=0;i<2;i++) { if(document.all.AA[i].checked) {flag1 = 1;}} for(flag2=0,i=0;i<2;i++) { if(document.all.CC[i].checked) {flag2 = 1;}} flag3=0; if(document.all.c1.value != ""){ flag3 = 1; } for(flag4=0,i=0;i<4;i++) { if(document.all.EE[i].checked) {flag4 = 1;}} flag5=0; if(document.all.c2.value != "") { flag5 = 1; } //未入力時のコメント出し// document.getElementById("flg1").style.display = flag1=="0"?"inline":"none"; document.getElementById("flg2").style.display = flag2=="0"?"inline":"none"; document.getElementById("flg3").style.display = flag3=="0"?"inline":"none"; document.getElementById("flg4").style.display = flag4=="0"?"inline":"none"; document.getElementById("flg5").style.display = flag5=="0"?"inline":"none"; } function check_key1() { //eA項目チェック時のeB項目選択可否// for(i=1;i<9;i++) { document.getElementsByTagName("select")[i].disabled = document.all.PP.checked?false:true; } } function calc1() { //未入力時に計算中止// if(flag1=="0" || flag2 == "0" || flag3 == "0" || flag4 == "0") return false; //『計算1』ボタンの計算// for(i=0;i<2;i++) { if(document.all.AA[i].checked) {a = document.all.AA[i].value;}} for(i=0;i<2;i++) { if(document.all.CC[i].checked) {b = document.all.CC[i].value;}} c = document.all.c1.value; for(i=0;i<4;i++) { if(document.all.EE[i].checked) {d = document.all.EE[i].value;}} c2 = document.all.c2.value; //a項目選択によるd項目の値を決める// if(a == "AA") { Ds = new Array("","10","20","30","40"); } else { Ds = new Array("","18","25","33","43"); } D = Ds[d]; //計算結果表示(a～d計)// resultabcd = eval(c*c2) + eval(D); document.getElementById("qq").value = resultabcd; //eAチェック選択時のeA項目、eB項目の計算// C2List = new Array("10","18","25","37","46"); C2 = Math.floor(c/10); Es = eval(C2List[C2]); if(document.all.PP.checked) { es = document.getElementsByTagName("select"); for(i=1;i<es.length;i++) { e = eval(es[i].value); Es = Es + e; } } else { Es = 0; } //計算結果表示(eA+eB計)// document.getElementById("tt").value = Es; //f1,f2表示// F1 = document.all.oo.value; F2 = document.all.pp.value; if(F1 == "") { F1 = 0; } if(F2 == "") { F2 = 0; } document.getElementById("rr").value = F1; document.getElementById("uu").value = F2; //計算結果表示(ABC,DEF,ABC+DEF,計算結果、の順)// document.getElementById("ss").value = resultabcd - F1; document.getElementById("vv").value = Es - F2; document.getElementById("ww").value = WWW = resultabcd + Es - F1 - F2; document.getElementById("xx").value = WWW * D; } function CL1() { //『クリア1』ボタンを押したときの追加機能// m = document.getElementsByTagName("span"); for(i=0;i<m.length;i++) { m[i].style.display = "none"; } n = document.getElementsByTagName("select"); for(i=1;i<n.length;i++) { n[i].disabled = true; } document.getElementById("qq").value = ""; document.getElementById("rr").value = ""; document.getElementById("ss").value = ""; document.getElementById("tt").value = ""; document.getElementById("uu").value = ""; document.getElementById("vv").value = ""; document.getElementById("ww").value = ""; document.getElementById("xx").value = ""; } function numOnly() { //ユーザー入力項目の数値のみ可能// m = String.fromCharCode( event.keyCode ); if ( "0123456789\b\r".indexOf( m, 0 ) < 0 ) { return false; } return true; } function check_num() { //c1の値が1～49の値であるかチェック// flag6 = 0; num = document.all.c1.value; if(num == 0 || num >= 50) { flag6 = 1; } document.all.c1.value = flag6 == "1"?"":num; document.getElementById("flg6").style.display = flag6=="1"?"inline":"none"; } //--></script> <form name="all"> <div class="left">a</div> <div class="right"> <input name="AA" type="radio" value="AA">AA　 <input name="AA" type="radio" value="BB">BB <span class="error" id="flg1">※選択してください</span> </div> <div class="clear"></div> <div class="left">b</div> <div class="right"> <input name="CC" type="radio" value="CC">CC　 <input name="CC" type="radio" value="DD">DD <span class="error" id="flg2">※選択してください</span> </div> <div class="clear"></div> <div class="left">c</div> <div class="right"> <input name="c1" type="text" value="" onkeyup="check_num();" onkeypress="return numOnly();"> <select name="c2"> <option value="">選択</option> <option value="50">50</option> <option value="60">60</option> <option vlaue="70">70</option> <option value="80">80</option> </select> <span class="error" id="flg3">※入力してください</span> <span class="error" id="flg5">※倍率を選択してください</span> <span class="error" id="flg6">※数値は1～49でお願いします</span> </div> <div class="clear"></div> <div class="left">d</div> <div class="right"> <input name="EE" type="radio" value="1">EE　 <input name="EE" type="radio" value="2">FF　 <input name="EE" type="radio" value="3">GG　 <input name="EE" type="radio" value="4">HH <span class="error" id="flg4">※選択してください</span> </div> <div class="clear"></div> <div class="left">eA</div> <div class="right"> <input name="PP" type="checkbox" onclick="check_key1()" value="eA">PP </div> <div class="clear"></div> <div class="left">&nbsp;</div> <div class="colum">e1</div> <div class="colum">I1</div> <div class="left"> <select name="i1" disabled> <option value="0">選択</option> <option value="100">1</option> <option value="200">2</option> </select> </div> <div class="colum">I2</div> <div class="left"> <select name="i2" disabled> <option value="0">選択</option> <option value="150">1</option> <option value="300">2</option> </select> </div> <div class="clear"></div> <div class="left">&nbsp;</div> <div class="colum">e2</div> <div class="colum">J1</div> <div class="left" disabled> <select name="j1" disabled> <option value="0">選択</option> <option value="80">1</option> <option value="160">2</option> </select> </div> <div class="colum">J2</div> <div class="left"> <select name="j2" disabled> <option value="0">選択</option> <option value="120">1</option> <option value="240">2</option> </select> </div> <div class="clear"></div> <div class="left">eB</div> <div class="colum">e3</div> <div class="colum">K1</div> <div class="left"> <select name="k1" disabled> <option value="0">選択</option> <option value="50">1</option> <option value="100">2</option> </select> </div> <div class="colum">K2</div> <div class="left"> <select name="k2" disabled> <option value="0">選択</option> <option value="90">1</option> <option value="180">2</option> </select> </div> </div> <div class="clear"></div> <div class="left">&nbsp;</div> <div class="colum">e4</div> <div class="right"> <select name="l1" disabled> <option value="0">選択</option> <option value="25">1</option> <option value="50">2</option> </select> </div> <div class="clear"></div> <div class="left">&nbsp;</div> <div class="colum">e5</div> <div class="right"> <select name="m1" disabled> <option value="0">選択</option> <option value="7">1</option> <option value="14">2</option> </select> </div> <div class="clear"></div> <div class="left">f</div> <div class="right"> f1<input name="oo" type="text" id="f1" onkeypress="return numOnly()"> f2<input name="pp" type="text" id="f2" onkeypress="return numOnly()"> </div> <div class="clear"></div> <div> <input name="keisan1" type="button" value="計算" onclick="check();calc1()">　 <input name="clear1" type="reset" value="クリア" id="clear1" onclick="CL1()"> </div> </form> <div class="left2">a～dの計</div> <div class="right"> <input type="text" name="qq" id="qq" readonly="readonly"> -f1 <input type="text" name="rr" id="rr" readonly="readonly"> = ABC <input type="text" name="ss" id="ss" readonly="readonly"> </div> <div class="clear"></div> <div class="left2">eA+eBの計</div> <div class="right"> <input type="text" name="tt"id="tt" readonly="readonly"> -f2 <input type="text" name="uu" id="uu" readonly="readonly"> = DEF <input type="text" name="vv" id="vv" readonly="readonly"> </div> <div class="clear"></div> <div class="left2">ABC+DEFの計</div> <div class="right"> <input type="text" name="ww" id="ww" readonly="readonly">×dで選択したときの代入数字 = <input type="text" name="xx" id="xx" readonly="readonly"> </div> <div class="clear"></div> <div> </div>

ayane007
質問者

お礼

leap_dayさん、何度もありがとうございます。 leap_dayさんが、回答下さいました内容で、私が思い描いていた計算表が出来上がりました。 本当に助かりました。ありがとうございました。 分かりづらい説明の中から、回答頂いたことに大変感謝しています。 また、ご教授願うことがあると思いますが、宜しくお願いします。 本当に、ありがとうございました。

その他の回答 (3)

  • leap_day
  • ベストアンサー率60% (338/561)
回答No.3

こんにちは 説明から理解しているのは a項目　→　d項目のvalue値の変更 b項目　→　不明(ノータッチです) c項目　→　ユーザー入力 d項目　→　a項目と選択によりvalue値可変 eA項目　→　eB項目の選択、可、不可変更 eB項目　→　eAチェック時のみ全ての値を合計 f項目　→　ユーザー入力、入力時のみ『計算2』ボタン可 a項目～d項目必須選択 計算　→　 (b項目？) + c項目 + d項目 - f1 = ABC eB項目の合計 - f2 = DEF (ABC + DEF) * d項目 = 計算結果 ・・・と理解してます ※b項目は分からなかったので組み込んでいません(多分a項目との組み合わせでd項目の値を決めてるのかな？とは思いますけど) ※<table>レイアウトではなく<div>レイアウトにしていますが個人の好みなので他意はありません　ｍ（－－）ｍ <style type="text/css"> .left { float:left; width:60px; } .left2 { float:left;width:120px; } .right { float:left; } .clear { clear:both; } .colum { float:left; width:30px; } .error { color:red; display:none;} </style> <script type="text/javascript"><!-- function check() { //a～d項目入力チェック// for(flag1=0,i=0;i<2;i++) { if(document.all.AA[i].checked) {flag1 = 1;}} for(flag2=0,i=0;i<2;i++) { if(document.all.CC[i].checked) {flag2 = 1;}} flag3=0; if(document.all.nn.value != ""){ flag3=1; } for(flag4=0,i=0;i<4;i++) { if(document.all.EE[i].checked) {flag4 = 1;}} //未入力時のコメント出し// document.getElementById("flg1").style.display = flag1=="0"?"inline":"none"; document.getElementById("flg2").style.display = flag2=="0"?"inline":"none"; document.getElementById("flg3").style.display = flag3=="0"?"inline":"none"; document.getElementById("flg4").style.display = flag4=="0"?"inline":"none"; } function check_key1() { //eA項目チェック時のeB項目選択可否// for(i=0;i<8;i++) { document.getElementsByTagName("select")[i].disabled = document.all.PP.checked?false:true; } } function check_key2() { //f項目入力時の『計算2』ボタンの可否// m = document.getElementById("f1").value; n = document.getElementById("f2").value; if(m != "" || n != "") { document.getElementById("kei2").disabled = false; } else { document.getElementById("kei2").disabled = true; } } function calc1() { //未入力時に計算中止// if(flag1=="0" || flag2 == "0" || flag3 == "0" || flag4 == "0") return false; //『計算1』ボタンの計算// for(i=0;i<2;i++) { if(document.all.AA[i].checked) {a = document.all.AA[i].value;}} for(i=0;i<2;i++) { if(document.all.CC[i].checked) {b = document.all.CC[i].value;}} c = document.all.nn.value; for(i=0;i<4;i++) { if(document.all.EE[i].checked) {d = document.all.EE[i].value;}} //a項目選択によるd項目の値を決める// if(a == "AA") { Ds = new Array("","10","20","30","40"); } else { Ds = new Array("","18","25","33","43"); } D = Ds[d]; //計算結果表示(a～d計)// resultabcd = eval(c) + eval(D); document.getElementById("qq").value = resultabcd; //eAチェック選択時のeB項目の計算// Es = 0; if(document.all.PP.checked) { es = document.getElementsByTagName("select"); for(i=0;i<es.length;i++) { e = eval(es[i].value); Es = Es + e; } } else { Es = 0; } //計算結果表示(eA+eB計)// document.getElementById("tt").value = Es; //結果表示(f1,f2)// document.getElementById("rr").value = 0; document.getElementById("uu").value = 0; //計算結果表示(ABC,DEF,ABC+DEF,計算結果、の順)// document.getElementById("ss").value = resultabcd; document.getElementById("vv").value = Es; document.getElementById("ww").value = WW = resultabcd + Es; document.getElementById("xx").value = WW * D; } function calc2() { //『計算2』ボタンの計算// //未入力項目チェックと『計算1』ボタンの計算(同じものを書くようになるのでfunctionを呼び出し）// check(); calc1(); //f1,f2表示// F1 = document.all.oo.value; F2 = document.all.pp.value; if(F1 == "") { F1 = 0; } if(F2 == "") { F2 = 0; } document.getElementById("rr").value = F1; document.getElementById("uu").value = F2; //計算結果表示(ABC,DEF,ABC+DEF,計算結果、の順)// document.getElementById("ss").value = resultabcd - F1; document.getElementById("vv").value = Es - F2; document.getElementById("ww").value = WWW = resultabcd + Es - F1 - F2; document.getElementById("xx").value = WWW * D; } function CL1() { //『クリア1』ボタンを押したときの追加機能// m = document.getElementsByTagName("span"); for(i=0;i<m.length;i++) { m[i].style.display = "none"; } n = document.getElementsByTagName("select"); for(i=0;i<n.length;i++) { n[i].disabled = true; } } function CL2() { //『クリア2』ボタンを押したときの機能// document.getElementById("clear1").click(); document.getElementById("qq").value = ""; document.getElementById("rr").value = ""; document.getElementById("ss").value = ""; document.getElementById("tt").value = ""; document.getElementById("uu").value = ""; document.getElementById("vv").value = ""; document.getElementById("ww").value = ""; document.getElementById("xx").value = ""; document.getElementById("kei2").disabled = true; } function numOnly() { //ユーザー入力項目の数値のみ可能// m = String.fromCharCode( event.keyCode ); if ( "0123456789\b\r".indexOf( m, 0 ) < 0 ) { return false; } return true; } //--></script> <form name="all"> <div class="left">a</div> <div class="right"> <input name="AA" type="radio" value="AA">AA　 <input name="AA" type="radio" value="BB">BB <span class="error" id="flg1">※選択してください</span> </div> <div class="clear"></div> <div class="left">b</div> <div class="right"> <input name="CC" type="radio" value="CC">CC　 <input name="CC" type="radio" value="DD">DD <span class="error" id="flg2">※選択してください</span> </div> <div class="clear"></div> <div class="left">c</div> <div class="right"> <input name="nn" type="text" value="" onkeypress="return numOnly()"> <span class="error" id="flg3">※入力してください</span> </div> <div class="clear"></div> <div class="left">d</div> <div class="right"> <input name="EE" type="radio" value="1">EE　 <input name="EE" type="radio" value="2">FF　 <input name="EE" type="radio" value="3">GG　 <input name="EE" type="radio" value="4">HH <span class="error" id="flg4">※選択してください</span> </div> <div class="clear"></div> <div class="left">eA</div> <div class="right"> <input name="PP" type="checkbox" onclick="check_key1()" value="eA">PP </div> <div class="clear"></div> <div class="left">&nbsp;</div> <div class="colum">e1</div> <div class="colum">I1</div> <div class="left"> <select name="i1" disabled> <option value="0">選択</option> <option value="100">1</option> <option value="200">2</option> </select> </div> <div class="colum">I2</div> <div class="left"> <select name="i2" disabled> <option value="0">選択</option> <option value="150">1</option> <option value="300">2</option> </select> </div> <div class="clear"></div> <div class="left">&nbsp;</div> <div class="colum">e2</div> <div class="colum">J1</div> <div class="left" disabled> <select name="j1" disabled> <option value="0">選択</option> <option value="80">1</option> <option value="160">2</option> </select> </div> <div class="colum">J2</div> <div class="left"> <select name="j2" disabled> <option value="0">選択</option> <option value="120">1</option> <option value="240">2</option> </select> </div> <div class="clear"></div> <div class="left">eB</div> <div class="colum">e3</div> <div class="colum">K1</div> <div class="left"> <select name="k1" disabled> <option value="0">選択</option> <option value="50">1</option> <option value="100">2</option> </select> </div> <div class="colum">K2</div> <div class="left"> <select name="k2" disabled> <option value="0">選択</option> <option value="90">1</option> <option value="180">2</option> </select> </div> </div> <div class="clear"></div> <div class="left">&nbsp;</div> <div class="colum">e4</div> <div class="right"> <select name="l1" disabled> <option value="0">選択</option> <option value="25">1</option> <option value="50">2</option> </select> </div> <div class="clear"></div> <div class="left">&nbsp;</div> <div class="colum">e5</div> <div class="right"> <select name="m1" disabled> <option value="0">選択</option> <option value="7">1</option> <option value="14">2</option> </select> </div> <div class="clear"></div> <div class="left">f</div> <div class="right"> f1<input name="oo" type="text" id="f1" onkeyup="check_key2()" onkeypress="return numOnly()"> f2<input name="pp" type="text" id="f2" onkeyup="check_key2()" onkeypress="return numOnly()"> </div> <div class="clear"></div> <div> <input name="keisan1" type="button" value="計算1" onclick="check();calc1()">　 <input name="clear1" type="reset" value="クリア1" id="clear1" onclick="CL1()"> </div> </form> <div class="left2">a～dの計</div> <div class="right"> <input type="text" name="qq" id="qq" readonly="readonly"> -f1 <input type="text" name="rr" id="rr" readonly="readonly"> = ABC <input type="text" name="ss" id="ss" readonly="readonly"> </div> <div class="clear"></div> <div class="left2">eA+eBの計</div> <div class="right"> <input type="text" name="tt"id="tt" readonly="readonly"> -f2 <input type="text" name="uu" id="uu" readonly="readonly"> = DEF <input type="text" name="vv" id="vv" readonly="readonly"> </div> <div class="clear"></div> <div class="left2">ABC+DEFの計</div> <div class="right"> <input type="text" name="ww" id="ww" readonly="readonly">×dで選択したときの代入数字 = <input type="text" name="xx" id="xx" readonly="readonly"> </div> <div class="clear"></div> <div> <input name="kei2" type="button" value="計算2" id="kei2" onclick="calc2()" disabled>　 <input name="clear2" type="reset" value="クリア2" onclick="CL2()"> </div>

ayane007
質問者

補足

leap_dayさん、ありがとうございました。 返答が遅くなりまして、申し訳ありません。回答ありがとうございます。 説明不足の中で、解釈して頂いてありがとうございました。 leap_dayさんが、おっしゃってるようなような感じです。 b項目、計算２の部分は、計算に必要ありませんでした。申し訳ありません。 補足状態で申し訳ないのですが、 ご教授頂いた事に、下記のような内容で修正（補足）することができますでしょうか？ ・c項目のユーザ入力のテキストボックス（仮にc1とする）の隣に、セレクト（50～80までで10刻みに選択できるように／仮にc2とする）で選択 　　c1×c2という計算になるように。 ・eA のPPにチェックがついたとき、c項目のc1に入力された数字により、足す数字が違ってくる。（「eA+eBの計）にPPの数字もプラスされる） （例） c1に入力された数字　　　　　数字（PP） 1～9　　　　　　　　　　　　　10 10～19　　　　　　　　　　　　18 20～29　　　　　　　　　　　　25 30～39　　　　　　　　　　　　37 40～49　　　　　　　　　　　　46 以上のような条件をつけた場合の計算は可能でしょうか？ 説明が分かりづらいかもしれませんが、宜しくお願いします。

  • redfox63
  • ベストアンサー率71% (1325/1856)
回答No.2

計算部分の必要条件が足りないように思います 計算1で abcの合計とありますが a,bの定義が無いように思います AA,BBの選択で aは何になるのか CC,DDの選択で bは何になるのか eA+eBの部分でも PPのチェックが無ければ eBの計算をしないの チェックがあった場合 eAは何になるのか e1からe5に関しては OPTION要素のvalueは固定値でいいのでは無いかと思います たとえば i1なら <select id="i1"> <option value="100">1</option> <option value="200">2</option> </select> といった具合で … 計算1,2のボタンが submitである必要があるのかも検証が必要でしょう

ayane007
質問者

補足

redfox63さん、説明不足で申し訳ありませんでした。 箇条書きで説明させていただきます。 ・a項目の選択により、d項目の値が変わってくるようにしたい。 ・b項目は、算には必要なのですが、オプションとして選択させるようにしたい。 ・c項目は、ユーザ入力にした。仮にc1とc2とあるならば、 　　c1→テキストボックスでユーザ入力 　　c2→セレクトで（10～80で10刻みで選択できるようにしたい）ユーザ選択 　　c1×c2という計算にしたい。 ・d項目は、a項目での選択によって値が変わるようにしたい。（a項目と説明がダブるかも知れません） ・eAのPPを選択しないと、eBのe1～e5を選択できないようにしたい。 ・eAのPPを選択した場合、c項目のc1で入力した数字により、値を変更したい。 　（例） 　　c1に入力された数字　　　　　数字（PP） 　　1～9　　　　　　　　　　　　　10 　　10～19　　　　　　　　　　　　18 　　20～29　　　　　　　　　　　　25 　　30～39　　　　　　　　　　　　37 　　40～49　　　　　　　　　　　　46 ・eB項目のe1～e5は、下記に書いてる分のコピーになりますが、 　　＜例として＞ 　　(eB－－e1－－I1)2－－(e2－－J2)1－－(e4)2を選択した時 　　eA－－－－－PP 　　　　　　　　　　　｜ 　　eB－－－－－e1－－－－－2－－－－－0　(e1--I1×100,e1-I2×150) 　　　　　　　　　　　e2－－－－－1－－－－－0　(e1--J1×80,e1-J2×120) 　　　　　　　　　　　e3－－－－－0－－－－－0　(e1--K1×50,e1-K2×90) 　　　　　　　　　　　e4－－－－－2　　　　　　　　　(e4×25) 　　　　　　　　　　　e5－－－－－0　　　　　　　　　(e5×7) 　　※選択した数字に対して「I1」は100,「I2」は150を掛ける 　　　　　　　　　　　　　　　　　　「I1」は80,「J2」は120を掛ける 　　　　　　　　　　　　　　　　　　「I1」は50,「K2」は90を掛ける 　　　　　　　　　　　　　　　　　　「e4」は25を掛ける 　　　　　　　　　　　　　　　　　　「e5」は7を掛ける ・f項目は、f1,f2ともユーザ入力にしたい ・「a～dの計」としていますが、「計算結果１」という名前に変更します ・「計算」ボタンは、1つにする（計算2がなくなる） こんな感じの計算式ができないものかと考えていますが、可能でしょうか？ まだまだ、説明不足かもしれませんが、宜しくお願いします。

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

とりあえずチェックの部分に関してはこんな感じで <html> <head> <style type="text/css"> #error_a,#error_b,#error_c,#error_d{ display:none; color:red; } </style> <script type="text/javascript"> function calc1(f){ var val_a=""; var val_b=""; var val_c=""; var val_d=""; for(var i=0;i<f.length;i++){ if(f[i].type=="checkbox" && f[i].className=="group_a" && f[i].checked) val_a=f[i].name; if(f[i].type=="checkbox" && f[i].className=="group_b" && f[i].checked) val_b=f[i].name; if(f[i].type=="text" && f[i].className=="group_c") val_c=f[i].value; if(f[i].type=="checkbox" && f[i].className=="group_d" && f[i].checked) val_d=f[i].name; } document.getElementById('error_a').style.display=val_a==""?"inline":""; document.getElementById('error_b').style.display=val_b==""?"inline":""; document.getElementById('error_c').style.display=val_c==""?"inline":""; document.getElementById('error_d').style.display=val_d==""?"inline":""; if(val_a=="" || val_b==""|| val_c==""|| val_d=="") alert("未入力箇所があります") } window.onload=function(){ var f=document.getElementById("all"); for(var i=0;i<f.length;i++){ if(f[i].type=="checkbox" && f[i].className!=""){ f[i].onclick=check; } } } function check(){ var f=this.form; var cn=this.className; for(var i=0;i<f.length;i++){ if(f[i].type=="checkbox" && f[i].className==this.className && f[i]!=this) f[i].checked=false; } } </script> </head> <body> <form id="all"> <table border> <tr> <td colspan=2>a</td> <td colspan=7> <input name="AA" type="checkbox" class="group_a">AA <input name="BB" type="checkbox" class="group_a">BB <span id="error_a">※チェックしてください</span> </td> </tr> <tr> <td colspan=2>b</td> <td colspan=7> <input name=CC type=checkbox class="group_b">CC <input name=DD type=checkbox class="group_b">DD <span id="error_b">※チェックしてください</span> </td> </tr> <tr> <td colspan=2>c</td> <td colspan=7><input name="nn" type="text" class="group_c"> <span id="error_c">※入力してください</span> </td> </tr> <tr> <td colspan=2>d</td> <td colspan=7> <input name="EE" type="checkbox" class="group_d">EE <input name="FF" type="checkbox" class="group_d">FF <input name="GG" type="checkbox" class="group_d">GG <input name="HH" type="checkbox" class="group_d">HH <span id="error_d">※チェックしてください</span> </td> </tr> </table> <input name="keisan1" type="button" value="計算1" onClick="calc1(this.form)">　 <input name=clear1 type=reset value=クリア1> </form> </body> </html> 計算についてはa,b,c,dの相関関係がきちんと整理されていないので、 理解できません。 場合分けをきちんと整理したうえで質問なさるとよいと思います。

ayane007
質問者

補足

yambejpさん、チェックについて、ありがとうございました。 計算の部分は、分かりづらい説明で申し訳ございません。自分なりにまとめてみました。 改善になっていないかもしれませんが、宜しくお願いします。 計算の関係ですが、 a－－－－－AA－－－－－BB 　　　　　　　｜　　　　　　　　　　｜ 　　　　　　　　－－－－－－－ 　　　　　　　｜　　　　　　　　　　｜ b－－－－－CC－－－－－DD 　　　　　　　｜　　　　　　　　　　｜ c－－－－－数字を入力 　　　　　　　｜ 　　　　　　　－－－－－－－－－－－－－－－－－－－－ 　　　　　　　　｜　　　　　　　　｜　　　　　　　　　｜　　　　　　　｜ d－－－－－EE－－－－－FF－－－－－GG－－－－－HH －－－－－考え方としては、ここで一区切り－－－－－ ※ eBの項目を選択する場合は、必ずeAにチェックを入れなければ入力不可としたい。 eA－－－－－PP 　　　　　　　　　｜ eB－－－－－e1－－－I1－－－－－I2　　※e1--I1,I2は1～5の数字から選択したい 　　　　　　　　　e2－－－J1－－－－－J2　　　(e2～e5も同じように) 　　　　　　　　　e3－－－K1－－－－－K2 　　　　　　　　　e4 　　　　　　　　　e5 f－－－－－f1－－－－－f2 fの部分ですが、片方でも構わないので何かしら入力があった場合に「計算2」ボタンを押したら計算されるとしたいのです。 a～dまでの部分だけの関係でいくと、 ＜例1＞ (a)AA－－(b)CC－－(c)20－－(d)10を選択した時の計算 a－－－－－AA－－－－－BB 　　　　　　　　｜　　　　　　　　｜ 　　　　　　　　－－－－－－－－ 　　　　　　　　｜　　　　　　　　｜ b－－－－－CC－－－－－DD 　　　　　　　　｜　　　　　　　　｜ c－－－－－20 　　　　　　　　｜ 　　　　　　　　　－－－－－－－－－－－－－－－－－－－ 　　　　　　　　｜　　　　　　　　　｜　　　　　　　　｜　　　　　　　｜ d－－－－－10－－－－－20－－－－－30－－－－－40　(aでAAを選択した場合） 　　　　　　　　(18)　　　　　　　(25)　　　　　　　(33)　　　　　　　(43)　(aでBBを選択した場合） それ以降の部分の関係は、 ＜例2＞eAのPPを選択したとして、 (eB－－e1－－I1)2－－(e2－－J2)1－－(e4)2を選択した時 eA－－－－－PP 　　　　　　　　　｜ eB－－－－－e1－－－－－2－－－－－0　(e1--I1×100,e1-I2×150) 　　　　　　　　　e2－－－－－1－－－－－0　(e1--J1×80,e1-J2×120) 　　　　　　　　　e3－－－－－0－－－－－0　(e1--K1×50,e1-K2×90) 　　　　　　　　　e4－－－－－2　　　　　　　　　(e4×25) 　　　　　　　　　e5－－－－－0　　　　　　　　　(e5×7) ※選択した数字に対して「I1」は100,「I2」は150を掛ける 　　　　　　　　　　　　　　　　「I1」は80,「J2」は120を掛ける 　　　　　　　　　　　　　　　　「I1」は50,「K2」は90を掛ける 　　　　　　　　　　　　　　　　「e4」は25を掛ける 　　　　　　　　　　　　　　　　「e5」は7を掛ける fに入力があった場合は、 ＜例3＞ f1に60、f2に30と入力があったら、 f－－－－－60－－－－－30 「計算2」ボタンを押した時の計算ですが、 1の計算：a～dの計(例1で計算した計)-f1(f1に入力があったら入力数字を、なければ0)=ABC(答え) 2の計算：eA+eBの計(例2で計算した計)-f2(f2に入力があったら入力数字を、なければ0)=DEF(答え) 3の計算：ABC+DEFの計(1の計算+2の計算)×d(例1で選択したもの)=(答え) という計算ができますでしょうか？ きちんと説明できているか不安ですが、宜しくお願いします

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

関連するQ&A

  • セレクトボックスを使ったJavaScriptでの計算方法

    セレクトボックスから名前を選択して計算する方法を教えてください。 HTMLとJavaScriptは別に分けます。 ----------.html---------- <table border="1"> <tr><td>武器</td> <td><form name="myForm"> <select name="Item" size="1" tabindex="0"> <option value="0">あああああ</option> <option value="1">いいいいい</option> <option value="2">ううううう</option> 　　　　　・ 　　　　　・ 　　　　　・ 　　　　　・ 　　　　　・ </select> </td></tr> <tr><td>OP1</td> <td> <select name="OP1" size="1" tabindex="0"> <option value="0">AAAAA</option> <option value="1">BBBBB</option> <option value="2">CCCCC</option> 　　　　　・ 　　　　　・ 　　　　　・ 　　　　　・ 　　　　　・ </select> </td></tr> <tr><td>OP2</td> <td> <select name="OP2" size="1" tabindex="0"> <option value="0">aaaaa</option> <option value="0">bbbbb</option> <option value="0">ccccc</option> 　　　　　・ 　　　　　・ 　　　　　・ 　　　　　・ 　　　　　・ </select> </td></tr> <tr><td>OP2</td> <td> <select name="OP2" size="1" tabindex="0"> <option value="0">aaaaa</option> <option value="0">bbbbb</option> <option value="0">ccccc</option> 　　　　　・ 　　　　　・ 　　　　　・ 　　　　　・ 　　　　　・ </select> </td></tr> <tr><td colspan="2" align="center"> <input type="button" value="計算する" onclick="Calculation()"> <input type="reset" name="リセット" value="リセット"> </form> </td></tr> <tr><td colspan="2" align="center"> <form name="TxtArea"><input type="text" name="myResult" size="20"> </form> </td></tr> </table> .jsではItemをbox1、OP1をbox2、OP3をbox3、OP3をbox4としています。 box1[0]=10; box1[1]=15; といった感じです。 全部足し算で計算します。 どのようにすれば計算できるのかJavaScriptについて書かれてるページを見たのですが理解できなかったのでよろしくお願いします。

  • 複数のチェックボックスをチェックしたい

    質問させてください。 複数のチェックボックスを項目別に全てチェックするようなjqueryの書き方をご教授いただきたいです。 <table> <tr> <td> <input type="checkbox" name="" />まとめてチェック </td> </tr> <tr> <td> <li><input type="checkbox" name="" value="" />a</li> <li><input type="checkbox" name="" value="" />b</li> <li><input type="checkbox" name="" value="" />c</li> <li><input type="checkbox" name="" value="" />d</li> </td> </tr> <tr> <td> <input type="checkbox" name="" />まとめてチェック </td> </tr> <tr> <td> <li><input type="checkbox" name="" value="" />e</li> <li><input type="checkbox" name="" value="" />f</li> <li><input type="checkbox" name="" value="" />g</li> <li><input type="checkbox" name="" value="" />h</li> </td> </tr> <tr> <td> <input type="checkbox" name="" />まとめてチェック </td> </tr> <tr> <td> <li><input type="checkbox" name="" value="" />i</li> <li><input type="checkbox" name="" value="" />j</li> <li><input type="checkbox" name="" value="" />k</li> <li><input type="checkbox" name="" value="" />l</li> </td> </tr> </table> 上記のようにそれぞれの項目に「まとめてチェック」のチェックボックスがあり、 そこに該当するチェック項目は全てチェックorチェックを外す っという挙動の実装を考えています。 jqueryでやりたいのですが、javascript、jqueryがかなり苦手でいまいちいきません。 ググって $(function(){ $('#all').click(function(){ if(this.checked){ $('#check input').attr('checked','checked'); }else{ $('#check input').removeAttr('checked'); } }); }); このソースを見つけたのですが、これだと一つの項目でしか実装できず 項目分このjqueryを書くのも余り良い書き方だと思えません。 どなたか、ご教授お願いいたします。

  • selectでinputの表示を変えたい

    セレクトを選択した時に、inputの一部をdisabledにし、同時にinputの背景色を変更したいと思っています。 ----------------------------------------------------------------------- 現在はこんな感じです。 function menuLink(linkLoc) { if(linkLoc !="") { ifrm.location.href=linkLoc;} } --- セレクト１ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="11.html">1</OPTION> <OPTION value="22.html">2</OPTION> <OPTION value="33.html">3</OPTION> セレクト２ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="44.html">1</OPTION> <OPTION value="55.html">2</OPTION> <OPTION value="66.html">3</OPTION> セレクト３ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="77.html">1</OPTION> <OPTION value="88.html">2</OPTION> <OPTION value="99.html">3</OPTION> (実際にはもっと多くのセレクトがあります) <TR> <TD><INPUT type="text" name="aa" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ba" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ca" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ab" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bb" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cb" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ac" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bc" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cc" size="10" maxlength="2" /></TD></TR> <TR> <TD><INPUT type="text" name=da readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ea readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fa readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=db readOnly value=0 size=10></TD> <TD><INPUT type="text" name=eb readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fb readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=dc readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ec readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fc readOnly value=0 size=10></TD></TR> ----------------------------------------------------------------------- セレクト１のどれかを選択した時に、インプットのaa,ba,da,eaをdisabledにし、同時にaa,ba,da,eaの背景色を変更 セレクト２のどれかを選択した時に、インプットのab,bb,db,ebをdisabledにし、同時にab,bb,db,ebの背景色を変更 という感じにしたいのですが、可能でしょうか？ 可能であれば書き方を教えていただけると助かります。 よろしくおねがいします。

  • チェックボックスのチェック処理

    HTMLでボタン押下時にチェックしたいことがあります。 ■カテゴリーA～Cで、カテゴリー毎に選択できるのは一つのみ 　(例)「A1・あ」と「A2・お」が選択時はNG ■カテゴリーは最大2つまで選択可能 　(例)「A1・い」と「C1・さ」が選択時はOK 　　　「A1・い」と「B2・く」と「C1・さ」が選択時はNG <html> <head> </head><body> <form> <table border="1"> <tr> <td>A1</td> <td><input type="checkbox" name="chk1" value="1">あ</td> </tr> <tr> <td>　</td> <td><input type="checkbox" name="chk1" value="1">い</td> </tr> <tr> <td>　</td> <td><input type="checkbox" name="chk1" value="1">う</td> </tr> <tr> <td>A2</td> <td><input type="checkbox" name="chk1" value="1">え</td> </tr> <tr> <td>　</td> <td><input type="checkbox" name="chk1" value="1">お</td> </tr> <tr> <td>B1</td> <td><input type="checkbox" name="chk1" value="1">か</td> </tr> <tr> <td>B2</td> <td><input type="checkbox" name="chk1" value="1">く</td> </tr> <tr> <td>　</td> <td><input type="checkbox" name="chk1" value="1">け</td> </tr> <tr> <td>C1</td> <td><input type="checkbox" name="chk1" value="1">さ</td> </tr> <tr> <td>C2</td> <td><input type="checkbox" name="chk1" value="1">し</td> </tr> <tr> <td>　</td> <td><input type="checkbox" name="chk1" value="1">す</td> </tr> </table> <input type="submit" value="チェック"> </form> </body> </html> すみませんがよろしくお願いします。

  • セレクトボックスを使った計算式

    テキストボックスに文字を入力してセレクトボックスで四則計算 をプルダウンメニューで選択し、３つ目のテキストボックスに 計算結果を表示するにはどのようにしたらよいのでしょうか？ とりあえず途中まで作ってみました。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>スクリプト練習</title> <script type="text/javascript"> <!-- function keisan(){ 　　　　if(option value="＋"){ 　　　　document.f1.t3.value(document.f1.t1.value + document.f1.t2.value); } } //--> </script> </head> <body> <form name="f1"> <input type="text" size="5" name="t1"> <select name="color2"> <option value="＋">＋</option> <option value="－">－</option> <option value="×">×</option> <option value="÷">÷</option> </select> <input type="text" size="5" name="t2"> <input type="button" value="=" onClick="keisan()"> <input type="text" size="5" name="t3"> </form> </body> </html> if文を作るところが特にわからず止まっています。 どうかよろしくお願いします。

  • 動的な表の計算

    いつもお世話になります。 見よう見まねでやっている初心者です。 下記のような動的な表があります（PHPで表の行が可変します。） name="aa"に入力された値とname="bb"に入力された値の足し算の 回答をname="kaito"に出したいと思っています。 計算ボタンを押すとname="kaito"に答えを出したいのですが、 以下のような式ですと当然ながら全く反応しません。 javascriptまたはPHPをどう記述すれば表の値を計算できるようになるのでしょうか？ できれば具体的に教えて頂ければ大変助かります。 ご教授の程よろしくお願い致します。 <script> function keisan(){document.tasizan.kaito.value=(document.tasizan.aa.value)+(document.tasizan.bb.value)} </script> <form name="tasizan"> <table width="100" border="1"> <tr> <th width="10" scope="col">a</th> <th width="10" scope="col">b</th> <th width="20" scope="col">回答</th> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> </table> </form>

  • チェックボックスとの連動

    白黒とカラーの項目を連動させています。例えば白黒のチェックをはずしてカラーにチェックを入れるとすでに白黒で選択してた場合、金額が合計に加算されてしまいます。チェックをはずした時点で選択項目の金額をリセットさせたいのですが解決方法が見つかりません。Javascript勉強中で正直よくわかっていません。下記スクリプトもあっちこっち調べながら組み合わせたものです。解決策をいただけると助かります。よろしくお願い致します。 <script language="javascript"> <!-- n_table1 = new Array(0,100,200); n_table2 = new Array(0,300,400); function keisan(obj) { var outStr=""; var total=0; total = total + n_table1[document.form1.koumoku1.selectedIndex] * document.form1.kazu1.value; total = total + n_table2[document.form1.koumoku2.selectedIndex] * document.form1.kazu1.value; outStr = total; document.form1.goukei.value=eval(outStr); } function ctrl_check01(check02_checked) { document.getElementsByName("idcheck2")[0].disabled = check02_checked; document.getElementsByName("koumoku2")[0].disabled = check02_checked; } function ctrl_check03(check04_checked) { document.getElementsByName("idcheck")[0].disabled = check04_checked; document.getElementsByName("koumoku1")[0].disabled = check04_checked; } // --> </script> <form name="form1" METHOD="POST"> <table cellspacing="0" cellpadding="8" border="1" bordercolor="#666"> <tr> <td>白黒</td> <td><input type=checkbox name="idcheck" id="idcheck" onClick="ctrl_check01(this.checked);"> 白黒 <select name="koumoku1"> <option>選択 <option>--------------A(100) <option>--------------B(200) </select> </tr> <tr> <td>カラー</td> <td><input type=checkbox name="idcheck2" id="idcheck2" onClick="ctrl_check03(this.checked);"> カラー <select name="koumoku2"> <option>選択 <option>--------------A(300) <option>--------------B(400) </select></td> </tr> <tr> <td colspan="2"></td> </tr> <tr> <td>総枚数</td> <td><input type="text" name="kazu1" size="8" maxlength="12" value="0"> 枚</td> </tr> <tr> <td colspan="2"></td> </tr> <tr> <td>合計</td> <td><input type="text" name="goukei" size="8" maxlength="12" value="0"> 円</td> </tr> </table> <input type="button" value="計算する" onClick="keisan(this.form)"> </form>

  • チェックボックス設定の方法教えてください

    チェックボックスの設定方法を教えてください。 項目1.大分類にチェックすると中分類と小分類にもチェックが入る。 項目2.中分類にチェックすると小分類にもチェックが入る。 項目2の設定はわかりますが、項目1の設定がどうしてもできません。 <script language=javascript> function allCheck(obj){ f=obj.form num=obj.name.replace("b","") for(var i=0;i<f.length;i++){ if(f[i].name=="s"+num) f[i].checked=obj.checked; } } </script> <FORM> <TABLE border=0> <TBODY> <TR> <TD class=color_1 rowSpan=4><INPUT onclick=allCheck(this) type=checkbox name=b1>大分類</TD> <TD class=color_1 rowSpan=4><INPUT onclick=allCheck(this) type=checkbox name=b1>中分類</TD> <TD class=color_1><INPUT type=checkbox name=s1>小分類</TD></TR> <TR> <TD class=color_2><INPUT type=checkbox name=s1>小分類</TD></TR> <TR> <TD class=color_1><INPUT type=checkbox name=s1>小分類</TD></TR> <TR> <TD class=color_2><INPUT type=checkbox name=s1>小分類</TD></TR> <TR> <TD class=color_1 rowSpan=3><INPUT onclick=allCheck(this) type=checkbox name=b2>中分類 <P></P></TD> <TD class=color_1><INPUT type=checkbox name=s2>小分類</TD></TR> <TR> <TD class=color_2><INPUT type=checkbox name=s2>小分類</TD></TR> <TR> <TD class=color_2><INPUT type=checkbox name=s2>小分類</TD></TR></TBODY></TABLE></FORM> すいませんが、教えて下さい。

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

    チェックボックスや、ラジオボタンで、選択した項目の金額を、最後にテキストフォームに表示させる…というやり方を探しております ソース途中からですが…↓ <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="ＱＲコード">ＱＲコード<Br> </td> </tr> といった感じです。 value　はすでに、他のところで使用しています 単純に計算だけを目的とさせているんですが、どうしたら良いでしょうか？

  • セレクトボックスの値から料金を計算したい

    お世話になります。 現在、HTML中に下記のソースを記述しセレクトボックスの数量が選択されたときに自動計算をしようとしています。 ------------------------------------------------------------------- <table summary="ご購入内容"> <tr> <th><p>カレンダー</p></th> <td class="price">1,000円（税込）</td> <td class="select"> <input type="hidden" name="field16_name" value="カレンダー" /> <input type="hidden" name="field16_req" value="no" /> <select type="select" id="item1" name="field16_text" accesskey="a" tabindex="1" onchange="keisan();"> <option value="0">　0部</option> <option value="1">　1部</option> <option value="2">　2部</option> <option value="3">　3部</option> <option value="4">　4部</option> <option value="5">　5部</option> </select></td> </tr> </table> <table summary="小計金額"> <tr> <th><p>小計金額</p></th> <td><input type="text" id="sender-shoukei1" name="field21_text" value="0" accesskey="k" tabindex="6" /> 円（税込）</td> </tr> <tr> <th><p>送料</p></th> <td> <input type="text" id="sender-postage1" name="field22_text" value="0" accesskey="k" tabindex="7" /> 円（税込）</td> </tr> </table> <table summary="合計金額" class="inner-02 m20"> <tr class="gokei"> <th>合計金額</th> <td> <input type="text" id="sender-goukei" name="field29_text" value="0" accesskey="k" tabindex="14" /> 円（税込）</td> </tr> </table> ------------------------------------------------------------------- <script type="text/javascript"> /* <![CDATA[ */ function keisan(){ /* 商品 */ var price1 = document.form.field16_text.options[document.form.field16_text.selectedIndex].value; var field21_text= parseInt(price1)*1470 ; /* 小計 */ document.form.field21_text.value = addFigure(field21_text); /*送料 */ var price1p = 0; if ( price1 < 2 ) { price1p = price1 * 290; } else { price1p = 0; } var field22_text = parseInt(price1p); if ( field21_text > 5000 ) { field22_text = 0; } document.form.field22_text.value = addFigure(field22_text); /* 合計 */ var field29_text = parseInt(field21_text); document.form.field29_text.value = addFigure(field29_text); function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } } /* ]]> */ </script> ------------------------------------------------------------------- しかし、「'document.form.field16_text'はNullまたはオブジェクトではありません」とエラーが出てしまいます。 アンダーバーは利用できないのでしょうか？どこに問題があるのかお教えください。 どうぞ宜しくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する