ここから質問投稿すると、最大4000ポイント当たる!!!! >>

下記のような条件を満たす計算表を作りたいのですが、どのように作っていけばいいのか、さっぱり分かりません。
殆ど初心者に近い状態で、このような複雑な計算表を作るのは不可能に近いのは分かっているのですが、是非、ご教授願いたいと思い、質問させて頂きたいです。

<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」を引く

長くて条件等も分かりづらいかもしれませんが、宜しくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (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>
    • good
    • 0
この回答へのお礼

leap_dayさん、何度もありがとうございます。
leap_dayさんが、回答下さいました内容で、私が思い描いていた計算表が出来上がりました。
本当に助かりました。ありがとうございました。

分かりづらい説明の中から、回答頂いたことに大変感謝しています。
また、ご教授願うことがあると思いますが、宜しくお願いします。

本当に、ありがとうございました。

お礼日時:2008/02/26 09:03

こんにちは



説明から理解しているのは
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>レイアウトにしていますが個人の好みなので他意はありません m(--)m

<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項目、計算2の部分は、計算に必要ありませんでした。申し訳ありません。

補足状態で申し訳ないのですが、
ご教授頂いた事に、下記のような内容で修正(補足)することができますでしょうか?

・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

以上のような条件をつけた場合の計算は可能でしょうか?
説明が分かりづらいかもしれませんが、宜しくお願いします。

補足日時:2008/02/25 15:57
    • good
    • 0

計算部分の必要条件が足りないように思います



計算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」という名前に変更します
・「計算」ボタンは、1つにする(計算2がなくなる)

こんな感じの計算式ができないものかと考えていますが、可能でしょうか?
まだまだ、説明不足かもしれませんが、宜しくお願いします。

補足日時:2008/02/25 16:18
    • good
    • 0

とりあえずチェックの部分に関してはこんな感じで



<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で選択したもの)=(答え)


という計算ができますでしょうか?
きちんと説明できているか不安ですが、宜しくお願いします

補足日時:2008/02/22 14:39
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QFORMで送信ボタンと戻るボタンを2つつけてそれぞれ遷移先を変えたい

  
以下のような画面を作りたいのですが↓

--------------------------------------------------------------------------------
● a.php (ユーザ情報入力画面) ※フォームに入力する画面
 
 <FORM method="POST" action="b.php">
  <INPUT type="text" name="mail">
  <INPUT type="submit" name="submit" value="確認">
 </FORM>

● b.php (ユーザ情報入力確認画面)※フォームに入力された値を表示する画面

 <FORM method="POST" action="c.php">
  <!-- ここには、フォームに入力された値を表示する -->
  <INPUT type="submit" name="submit" value="登録"> // c.php に遷移する
  <INPUT type="submit" name="submit" value="戻る"> // a.php に戻る
 </FORM>

● c.php (完了画面)
--------------------------------------------------------------------------------
b.php について質問なのですが、
b.phpにおいて、登録ボタンと戻るボタンを2つつけて、
それぞれ遷移先を変えたいのですが、どうすればいいんでしょうか・・・?
<FORM method="POST" action="c.php">と書いてしまうと、
戻るボタンを押しても戻らずに、c.phpに遷移してしまいますよね??
こういう場合ってJavaScriptとかで遷移先を指定するんですか・・?
もしそうでしたら、JavaScriptがよくわからないので
できればサンプルコード示していただけると助かります・・・。
  

  
以下のような画面を作りたいのですが↓

--------------------------------------------------------------------------------
● a.php (ユーザ情報入力画面) ※フォームに入力する画面
 
 <FORM method="POST" action="b.php">
  <INPUT type="text" name="mail">
  <INPUT type="submit" name="submit" value="確認">
 </FORM>

● b.php (ユーザ情報入力確認画面)※フォームに入力された値を表示する画面

 <FORM method="POST" action="c.php">
  <!-- ここには、フォームに入...続きを読む

Aベストアンサー

はじめまして。

<INPUT type="submit" name="submit" value="登録" onClick="form.action='c.php';return true">
<INPUT type="submit" name="submit" value="戻る" onClick="form.action='a.php';return true">

でいいと思います。(実際、このコードで使っています)
値を渡すには、FORM内にhiddenで、値を設定しておいて、methodをPOSTに設定しておけば、渡せます。

Qチェックボックスによる検索

こんばんは。お世話になっております。
PHPにてDB(MySQL)に登録されたデータをチェックボックスのみで検索するスクリプトを組んでおりますが、チェックボックスの数が多数あり、混乱してしまい、お力をお借りしたく投函させて頂きました。
上手く説明できるかどうか判りませんが…

まず検索項目として、(複数チェック可)
カテゴリ: □ドリンク □グルメ □ケーキ
年齢:   □20代  □30代

以上のようなフォームを用意しており、各チェックボックスのnameはDBのフィールドを同じ名前。valueは実際に登録されている数値を記述しています。

そこで、上記チェックボックスにいくつかのチェックを入れ、検索すると、それに該当するものだけを検索結果として一覧表示させたいのですが、現在、全ての項目に当てはまるものと一緒に、1つでも含んだデータまでもが表示されてしまいます。

お忙しい中恐縮ですが、お知恵を頂戴出来ればと考えております。
宜しくお願い致します。

//POSTで受け取ったデータを配列にし、
foreach($arr as $category){
$wherearr1[] = " ( category = '$category' )" }
foreach($arr as $category){
$wherearr2[] = " ( age = '$age' )" }

$wherestr1 = implode(" OR ",$wherearr1);
$wherestr2 = implode(" OR ",$wherearr2);
$sql = "select * from member where $wherestr AND $wherestr1 order by date desc";

$result = mysql_query($sql);

こんばんは。お世話になっております。
PHPにてDB(MySQL)に登録されたデータをチェックボックスのみで検索するスクリプトを組んでおりますが、チェックボックスの数が多数あり、混乱してしまい、お力をお借りしたく投函させて頂きました。
上手く説明できるかどうか判りませんが…

まず検索項目として、(複数チェック可)
カテゴリ: □ドリンク □グルメ □ケーキ
年齢:   □20代  □30代

以上のようなフォームを用意しており、各チェックボックスのnameはDBのフィールドを同じ名前。valueは実...続きを読む

Aベストアンサー

どっちもチェックされていることが前提で。

<form>
<b>カテゴリ</b><br>
<input type="checkbox" name="cate[]" value="1">ドリンク<br>
<input type="checkbox" name="cate[]" value="2">グルメ<br>
<input type="checkbox" name="cate[]" value="3">ケーキ<br>
<br>
<b>年齢</b><br>
<input type="checkbox" name="age[]" value="10">10代<br>
<input type="checkbox" name="age[]" value="20">20代<br>
<br>
<input type="submit">
<input type="hidden" name="aaa" value="aaa">
</form>



<?PHP

$arr1 = array();
foreach($_GET['cate'] as $cate){
$arr1[] = " category = '$cate' ";
}
$arr2 = array();
foreach($_GET['age'] as $age){
$arr2[] = " age = '$age' ";
}

$a = implode(" OR ",$arr1);
$b = implode(" OR ",$arr2);
$sql = "select * from member where ($a) AND ($b) order by date desc";

print $sql;

?>

修正してみて思ったのですが、二つとも「$arr as $category」だったり、
使用された形跡がない変数「 $wherestr 」が使われていたりします。
あとは、
$a = implode(",",$_GET['cate']);
として、 category in ($a) とかやってみたりしてもいいでしょう。

<?PHP

$a = implode(",",$_GET['cate']);
$b = implode(",",$_GET['age']);
$sql = "select * from member where category in ($a) AND age in ($b) order by date desc";

print $sql;

?>

どっちもチェックされていることが前提で。

<form>
<b>カテゴリ</b><br>
<input type="checkbox" name="cate[]" value="1">ドリンク<br>
<input type="checkbox" name="cate[]" value="2">グルメ<br>
<input type="checkbox" name="cate[]" value="3">ケーキ<br>
<br>
<b>年齢</b><br>
<input type="checkbox" name="age[]" value="10">10代<br>
<input type="checkbox" name="age[]" value="20">20代<br>
<br>
<input type="submit">
<input type="hidden" name="aaa" value="aaa">
</form>


...続きを読む


人気Q&Aランキング