- ベストアンサー
チェックボックス、セレクトボックスを組み合わせた複雑な計算表を作りたい
下記のような条件を満たす計算表を作りたいのですが、どのように作っていけばいいのか、さっぱり分かりません。 殆ど初心者に近い状態で、このような複雑な計算表を作るのは不可能に近いのは分かっているのですが、是非、ご教授願いたいと思い、質問させて頂きたいです。 <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」を引く 長くて条件等も分かりづらいかもしれませんが、宜しくお願いします。
- ayane007
- お礼率50% (13/26)
- JavaScript
- 回答数4
- ありがとう数1
- みんなの回答 （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"> </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"> </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"> </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"> </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>
その他の回答 (3)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 説明から理解しているのは 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"> </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"> </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"> </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"> </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>
補足
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)
計算部分の必要条件が足りないように思います 計算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である必要があるのかも検証が必要でしょう
補足
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)
とりあえずチェックの部分に関してはこんな感じで <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の相関関係がきちんと整理されていないので、 理解できません。 場合分けをきちんと整理したうえで質問なさるとよいと思います。
補足
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で選択したもの)=(答え) という計算ができますでしょうか？ きちんと説明できているか不安ですが、宜しくお願いします
お礼
leap_dayさん、何度もありがとうございます。 leap_dayさんが、回答下さいました内容で、私が思い描いていた計算表が出来上がりました。 本当に助かりました。ありがとうございました。 分かりづらい説明の中から、回答頂いたことに大変感謝しています。 また、ご教授願うことがあると思いますが、宜しくお願いします。 本当に、ありがとうございました。