選択による表示の可否を含めた複雑な計算表について

質問

下記のような計算表を作りたいのですが…

AA　　1　　2　　3　　4
BB　　11　　12　　13　　14　　15
　　　　※AAのチェックによって表示され、選択可能
　　　＜例＞
　　　・AA-1を選択するとBB-11,12のみ表示して1つのみ選択可能
　　　・AA-2を選択するとBB-11,12,14のみ表示して　　　〃
　　　・AA-3を選択するとBB-11～15表示して　　　　　〃
CC　　テキストボックスでユーザ入力
DD　　テキストボックスでユーザ入力
EE　　CC×DD×＜AAのチェックとBBのチェックによる数字＞
　　　　＜例＞
　　　　・BBの＜例＞と同じ条件の元で
　　　　　AA-1－－－BB-11→15（チェックにより掛ける数字）
　　　　　〃　－－－〃　12→18（　〃　）
　　　　　AA-2－－－BB-12→22（　〃　）
　　　　　〃　－－－〃　14→27（　〃　）
　　　　　AA-3－－－BB-13→31（　〃　）
　　　　　〃　－－－〃　15→35（　〃　）
FF　　Aa　　Bb　　Cc　　Dd　　Ee
　　　　　　※AAとBBの条件と連動して、表示され選択可能
　　　　　＜例＞
　　　　　・AA-1を選択するとBB-11,12のみ表示し、1つのみを選択。FF-Aaのみ表示
　　　　　・AA-2を選択するとBB-11,12,14のみ表示し、　　　〃　　。FF-Aa,Ccのみ表示
　　　　　・AA-3を選択するとBB-11～15表示し、　　　　〃　　　　。FF-Bb,Ccのみ表示
GG　　セレクトボックスで4割～8割から選択
HH　　a　　b　　c　　d　　e　　f　　g
　　　　　BBの選択内容とFFの選択内容によって表示（選択は１つのみ）　※ 後の計算によって数字変更
　　　　＜例＞
　　　　　BB-11－－－FF-A－－－HH-a～c（a:3,b:6,c:10)
　　　　　〃　－－－〃　B－－－〃　a,c,f（a:4,c:5,f:8)
　　　　　〃　－－－〃　C－－－〃　c～g（c:4,d:5,e:8,f:14,g:18)
　　　　　BB-12－－－FF-A－－－HH-a～c（a:11,b:14,c:18)
　　　　　〃　－－－〃　B－－－〃　b,d,f,g（b:7,d:9,f:12,g:13)
　　　　　〃　－－－〃　C－－－〃　c～f（c:1,d:3,e:9,f:11)

「計算」ボタンと「リセット」ボタン
　※「計算」ボタンをクリックするとIIとJJ」に計算内容を表示
　※「リセット」ボタンをクリックすると、すべてリセットさせる。AAのみ表示を残す

II　　EE×GG
JJ　　（AAとBBとFFのチェックによる数字）×（20－HH）×II÷２
　　　＜例＞
　　　AA-1－－－BB-12－－－FF-A→12（掛ける数字）×（20－HH-a）×II÷2
　　　〃1－－－BB-12－－－〃　B→17（掛ける数字）×（20－〃c）×〃÷2
　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　・
－－－－－－－－
計算が大きく2つに別れて計算という形になるのですが、

<<1>>
－AA-1－－－BB-11－－－FF-A－｜→EEで必要な数字15
｜　｜　｜－〃12－－－〃　－｜→　　　　　〃　18
｜　｜
－〃2－－－BB-11－－－FF-A, C－｜→EEで必要な数字20
｜　｜　｜－〃 12－－－　〃　－｜→　　　〃　　22
｜　｜　｜－〃 14－－－　〃　－｜→　　　〃　　27
｜　｜
－〃3－－－BB-11－－－FF-B,E－｜→EEで必要な数字28
｜　　　｜－〃 12－－－　〃　－｜→　　　〃　　30
｜　　　｜－〃 13－－－　〃　－｜→　　　〃　　31
｜　　　｜－〃 14－－－　〃　－｜→　　　〃　　32
｜　　　｜－〃 15－－－　〃　－｜→　　　〃　　35
｜　　　　　　　　　・
－　　　　　　　　　・

<<2>>　※ < >の数字は掛ける時に必要な数字
－BB-11－－－FF-A－－－HH-a<3>
｜　｜　　　｜　　｜－－〃b<6>
｜　｜　　　｜　　｜－－〃c<10>
｜　｜　　　｜
｜　｜　　　FF-B－－－HH-a<4>
｜　｜　　　｜　　｜－－〃c<5>
｜　｜　　　｜　　｜－－〃f<8>
｜　｜　　　｜
｜　｜　　　FF-C－－－HH-c<4>
｜　｜　　　｜　　｜－－〃d<5>
｜　｜　　　｜　　｜－－〃e<8>
｜　｜　　　｜　　｜－－〃f<14>
｜　｜　　　｜　　｜－－〃g<18>
｜　｜
－BB-12－－－FF-A－－－HH-a<11>
｜　｜　　　｜　　｜－－〃b<14>
｜　｜　　　｜　　｜－－〃c<18>
｜　｜　　　｜
｜　｜　　　FF-B－－－HH-b<7>
｜　｜　　　｜　　｜－－〃d<9>
｜　｜　　　｜　　｜－－〃f<12>
｜　｜　　　｜　　｜－－〃g<13>
｜　｜　　　｜
－　　　　　　・
｜　　　　　　・

※ < >の数字は掛ける時に必要な数字
＜例＞AA-1－－－BB-12－－－FF-A<12>×（20－HH-a<3>）×II÷2

という感じになります。
大変分かりにくいとは思いますが、ご教授の程よろしくお願いします。

回答No.6

leap_day · ベストアンサー

こんにちは

また複雑なもの作ってますね～～(笑）

いろんな部分が不足してたり矛盾があったりして確認も取りづらいですが大まかなのを書いたので突き詰めていってください
※表示/非表示にもできますが大まかな構成なので有効/無効にしてます
※全ての疑問に回答してくれる方は少ないかもしれませんが1つ1つの疑問であれば回答してくれる方は多数居られるので以下の不明瞭な部分を補足に付け足してお礼なり新規なりで(新規であればここのアドレスを添付して)質問してください

【不明瞭部分】
・A(4)選択時のBB項目の選択可能部　→　BBs "?"部分
・A(2)-B(1)、A(3)-B(1)などの選択のときのEE項目の掛け数字　→　EEs　"?"部分
・HH項目選択可/不可の条件　→　HHs　"?"部分
・HH項目のそれぞれのvalue値　→　HHval　"?"部分
・A(4)選択時のFF項目の選択可/不可　→　FFs　"?"部分
・FF項目のそれぞれの掛け数字　→　FFval　"?"部分
・表示/非表示の切り替え(順番に1つづつ出すのか、まとめて何個か出すのか）それによってアラート処理の必要/不必要、プログラムの組み方などが多少変わるので

【配列部分説明】
BBs：[[A(1)選択時のBB項目の選択可指定],[A(2)選択時のBB項目の選択可指定],・・・
BB-11="0"；BB-12="1"；BB-13="2"；BB-14="3"；BB-15="4"

EEs：[["A(1)-B(1)選択のEE掛け数","A(1)-B(2)選択のEE掛け数","A(1)-B(3)","A(1)-B(4)","A(1)-B(5)"],
["A(2)-B(1)","A(2)-B(2)",・・・・

FFs：[[A(1)選択時のFF項目の選択可指定],[A(2)選択時のFF項目の選択可指定],・・・・
FF-Aa="0"；FF-Bb="1"；FF-Cc="2"；FF-Dd="3"；FF-Ee="4"

HHs：[[B(1)-F(1)選択のHH項目の選択可指定],[B(1)-F(2)],[B(1)-F(3)],[B(1)-F(4)],[B(1)-F(5)],[B(2)-F(1)],[B(2)-F(2)],・・・・
HH-a="0"；HH-b="1"；HH-c="2"；HH-d="3"；HH-e="4"；HH-f="5"；HH-g="6"

HHval：[["B(1)-F(1)のHH-aの値","B(1)-F(1)のHH-bの値",・・・],
["B(1)-F(2)のHH-aの値","B(1)-F(2)のHH-bの値",・・・],・・・・

FFval：[["A(1)B(1)F(1)選択判別","そのときのJJ項目掛け数"],["A(1)B(1)F(2)選択判別","そのときのJJ項目掛け数"],・・・・・

<script type="text/javascript"><!--
window.onload=function() {
BBs = [["0","1"],["0","1","3"],["0","1","2","3","4"],["?"]];
EEs = [ ["15","18","","",""],["?","22","","27",""],["?","?","31","?","35"],["?","?","?","?","?"]];
FFs = [["0"],["0","2"],["1","2"],["?"]];
HHs = [
["0","1","2"],["0","2","5"],["2","3","4","5","6"],["?"],["?"],
["0","1","2"],["1","3","5","6"],["2","3","4","5"],["?"],["?"],
["?"],["?"],["?"],["?"],["?"],
["?"],["?"],["?"],["?"],["?"],
["?"],["?"],["?"],["?"],["?"]
];
HHval = [
["3","6","10","","","",""],["4","","5","","","8",""],["","","4","5","8","14","18"],["?"],["?"],
["11","14","18","","","",""],["","7","","9","","12","13"],["","","1","3","9","11",""],["?"],["?"],
["?"],["?"],["?"],["?"],["?"],
["?"],["?"],["?"],["?"],["?"],
["?"],["?"],["?"],["?"],["?"]
];
FFval = [
["000","?"],["001","?"],["002","?"],["003","?"],["004","?"],
["010","12"],["011","18"],["012","?"],["013","?"],["014","?"],
["020","?"],["021","?"],["022","?"],["023","?"],["024","?"],
["030","?"],["031","?"],["032","?"],["033","?"],["034","?"],
["040","?"],["041","?"],["042","?"],["043","?"],["044","?"],
["100","?"],["101","?"],["102","?"],["103","?"],["104","?"],
["110","?"],["111","?"],["112","?"],["113","?"],["114","?"],
["120","?"],["121","?"],["122","?"],["123","?"],["124","?"],
["130","?"],["131","?"],["132","?"],["133","?"],["134","?"],
["140","?"],["141","?"],["142","?"],["143","?"],["144","?"],
["200","?"],["201","?"],["202","?"],["203","?"],["204","?"],
["210","?"],["211","?"],["212","?"],["213","?"],["214","?"],
["220","?"],["221","?"],["222","?"],["223","?"],["224","?"],
["230","?"],["231","?"],["232","?"],["233","?"],["234","?"],
["240","?"],["241","?"],["242","?"],["243","?"],["244","?"],
["300","?"],["301","?"],["302","?"],["303","?"],["304","?"],
["310","?"],["311","?"],["312","?"],["313","?"],["314","?"],
["320","?"],["321","?"],["322","?"],["323","?"],["324","?"],
["330","?"],["331","?"],["332","?"],["333","?"],["334","?"],
["340","?"],["341","?"],["342","?"],["343","?"],["344","?"]
]

objA = document.getElementById("cols").AA;
objB = document.getElementById("cols").BB;
objC = document.getElementById("cols").CC;
objD = document.getElementById("cols").DD;
objE = document.getElementById("cols").EE;
objF = document.getElementById("cols").FF;
objG = document.getElementById("cols").GG;
objH = document.getElementById("cols").HH;
objI = document.getElementById("cols").II;
objJ = document.getElementById("cols").JJ;
}

function sel1() {
for(i=0;i<objA.length;i++) { if(objA[i].checked) n = i; }
for(i=0;i<objB.length;i++) { objB[i].disabled = true; objB[i].checked = false; }
for(i=0;i<objF.length;i++) { objF[i].disabled = true; objF[i].checked = false; }

apBB = BBs[n];
for(i=0;i<apBB.length;i++) { objB[apBB[i]].disabled = false; }
apFF = FFs[n];
for(i=0;i<apFF.length;i++) { objF[apFF[i]].disabled = false; }
}

function sel2() {
m = n = -1;
for(i=0;i<objB.length;i++) { if(objB[i].checked) m = i; }
for(i=0;i<objF.length;i++) { if(objF[i].checked) n = i; }
for(i=0;i<objH.length;i++) { objH[i].disabled = true; objH[i].checked = false; }
if(m == "-1" || n == "-1") return false;
num = m * 5 + n;
apHH = HHs[num];
for(i=0;i<apHH.length;i++) { objH[apHH[i]].disabled = false; }

}

function col1() {
for(i=0;i<objA.length;i++) { if(objA[i].checked) { m = i; num0 = objA[i].value; }}
for(i=0;i<objB.length;i++) { if(objB[i].checked) n = i; }

num1 = EEs[m][n];
num2 = objC.value==""?"0":objC.value;
num3 = objD.value==""?"0":objD.value;;
objE.value = num0 * num1 * num2 * num3;
}

function col2() {
objI.value = objE.value * objG.value;
}

function col3() {
for(i=0;i<objA.length;i++) { if(objA[i].checked) { l = i; }}
for(i=0;i<objB.length;i++) { if(objB[i].checked) { m = i; }}
for(i=0;i<objF.length;i++) { if(objF[i].checked) { n = i; }}
for(i=0;i<objH.length;i++) { if(objH[i].checked) { o = i; }}
num1 = "" + l + "" + m + "" + n;
for(i=0;i<FFval.length;i++) {
if(num1 == FFval[i][0]) Fval = FFval[i][1];
}
num2 = m * 5 + n;
Hval = HHval[num2][o];
Ival = objE.value * objG.value;
objJ.value = Fval * ( 20 - Hval) * Ival /2;
}

function cl() {
objI.value = objJ.value = "";
}
//--></script>
<div id="test"></div>

<form id="cols">
<div>
<input type="radio" name="AA" value="1" onclick="sel1()">1
<input type="radio" name="AA" value="2" onclick="sel1()">2
<input type="radio" name="AA" value="3" onclick="sel1()">3
<input type="radio" name="AA" value="4" onclick="sel1()">4
</div>
<div>
<input type="radio" name="BB" value="" onclick="sel2()">11
<input type="radio" name="BB" value="" onclick="sel2()">12
<input type="radio" name="BB" value="" onclick="sel2()">13
<input type="radio" name="BB" value="" onclick="sel2()">14
<input type="radio" name="BB" value="" onclick="sel2()">15
</div>
<div>
<input type="test" name="CC" onkeyup="col1()">
</div>
<div>
<input type="text" name="DD" onkeyup="col1()">
</div>
<div>
<input type="text" name="EE" readonly>
</div>
<div>
<input type="radio" name="FF" value="" onclick="sel2()">Aa
<input type="radio" name="FF" value="" onclick="sel2()">Bb
<input type="radio" name="FF" value="" onclick="sel2()">Cc
<input type="radio" name="FF" value="" onclick="sel2()">Dd
<input type="radio" name="FF" value="" onclick="sel2()">Ee
</div>
<div>
<select name="GG">
<option value="0.4">4割</option>
<option value="0.5">5割</option>
<option value="0.6">6割</option>
<option value="0.7">7割</option>
<option value="0.8">8割</option>
</select>
</div>
<div>
<input type="radio" name="HH" value="">a
<input type="radio" name="HH" value="">b
<input type="radio" name="HH" value="">c
<input type="radio" name="HH" value="">d
<input type="radio" name="HH" value="">e
<input type="radio" name="HH" value="">f
<input type="radio" name="HH" value="">g
</div>
<input type="button" value="計算" onclick="col2();col3()">
<input type="reset" value="リセット" onclick="cl()">
<div>
<input type="text" name="II" readonly>
<input type="text" name="JJ" readonly>
</div>

お礼

leap_dayさん

ありがとうございました。
あれから、色々やってみて、何とか形に出来ました。
本当にありがとうございました。

補足

leap_dayさん
いつも本当にありがとうございます。
以前に回答頂いたコードを見ながら、チャレンジをしてはいるのですが…。

【不明瞭部分】の
>・表示/非表示の切り替え(順番に1つづつ出すのか、まとめて何個か出すのか）それによってアラート処理の必要/不必要、プログラムの組み方などが多少変わるので

ですが、順番に1つずつ出すのを希望しています。
順番が違ったらアラートで注意を促すようにもしたいと思っています。

いつもすいません……。

回答No.5

noname#84373

追加補足です
GGのselect ですが name が２つ指定されています
これは１つにすべきです。
値のとり方は、name='wariai' としたときは
document.getElementsByName('wariai')[0].value
です

なぜか「このカテゴリで人気のQ&A」でトップになっています
みなさん、注目しているということでしょうか？
がんばってくださいね！

回答No.4

noname#84373

最初に断っておきますが、私はあなたの望むような完成品を作るつもりはありません。参考になるような部分しか書きません。
さて、AAとBBの値の取得についてですが、得る値は１つなのに
なぜ、名前を個々につける必要があるのですか？
AAを選択するとBBが無効になるようにしておきました。応用してください
同一のradioで選択されたものの値を返す関数を定義してみました
EEをクリックするとCC*DD*BBが計算されます

サンプルを提示するのはよいのですが、余分なものを省いてはどうでしょうか？あえて表にする必要はないと思います
onClickでもonChangeでもタグの中に書き込んでかまいませんから
コードも書いてくださいね！

<html>
<body>
<form name="abc">
aa
<input type="radio" name="AA" onClick="document.getElementsByName('BB')[0].disabled=true;document.getElementsByName('BB')[1].disabled=true">1
<input type="radio" name="AA">2
<hr>
BB
<input type="radio" name="BB" value="11">11
<input type="radio" name="BB" value="12">12
<hr>
CC<input type="text" name="CC"><br>
DD<input type="text" name="DD"><br>
EE<input type="text" name="EE" onClick="document.getElementsByName('EE')[0].value=document.getElementsByName('CC')[0].value * document.getElementsByName('DD')[0].value * getRadio('BB')"><br>

<script>
function getRadio(n){
ob = document.getElementsByName(n);
for(var i=0;i<ob.length;i++) if(ob[i].checked) return ob[i].value;
}
</script>

お礼

_pipi_さん
ありがとうございました。
色々とチャレンジしてみます。

回答No.3

noname#84373

本当に困っているのなら手助けしたいとも思うのですが・・・
まず「のみ表示」するとかエラーを防ぐ対策は後回しにして
おおまかなフォームを作って見せてください。
複雑な条件を最初から組み入れるのではなく、
作ったフォームで、限定された条件のみで（例えば選択項目の一番最初のみを選んだ続けた場合など）正解を導くスクリプトを書いてみてください。
前回、他の方が書いてくださったサンプルはとても有意義なものでしたよ！
まずはそこからが始まりだと思います。
10000万行にも及ぶプログラムを書くのは大変でも
10行のプログラムを1000個作るのは簡単です
ちなみに私の実力として、5行程度のレベルなら、アドバイスできると思います。^^;

補足

_pipi_さん
ありがとうございます。
以前にご教授願ったのを自分で色々と試してはいるのですが、
選択項目によって表示／非表示（AAのみ最初から表示→選択→条件に合うBB項目表示など）や計算の数字等など複雑になってるので分からなくなっています。
まだ、試してみますがソースのみ載せておきます。
ご親切にありがとうございます。

<html>
<head>
</head>

<body>
<form name="all">
<table>
<tr>
<td width="22">AA</td>
<td>
<input type="radio" name="AA1">1
<input type="radio" name="AA2">2
<input type="radio" name="AA3">3
<input type="radio" name="AA4">4
</td>
</tr>
<tr>
<td>BB</td>
<td>
<input type="radio" name="BB11">11
<input type="radio" name="BB12">12
<input type="radio" name="BB13">13
<input type="radio" name="BB14">14
<input type="radio" name="BB15">15
</td>
</tr>
<tr>
<td>CC</td>
<td><input type="text" name="CC"></td>
</tr>
<tr>
<td>DD</td>
<td><input type="text" name="DD"></td>
</tr>
<tr>
<td>EE</td>
<td><input type="text" name="EE" readonly></td>
</tr>
<tr>
<td>FF</td>
<td>
<input type="radio" name="FFAa">Aa
<input type="radio" name="FFBb">Bb
<input type="radio" name="FFCc">Cc
<input type="radio" name="FFDd">Dd
<input type="radio" name="FFEe">Ee
</td>
</tr>
<tr>
<td>GG</td>
<td><select name="select" name="wariai">
<option value="">選択</option>
<option value="0.4">４割</option>
<option value="0.5">５割</option>
<option value="0.6">６割</option>
<option value="0.7">７割</option>
<option value="0.8">８割</option>
</select></td>
</tr>
<tr>
<td>HH</td>
<td>
<input type="radio" name="HHa">a
<input type="radio" name="HHb">b
<input type="radio" name="HHc">c
<input type="radio" name="HHd">d
<input type="radio" name="HHe">e
<input type="radio" name="HHf">f
<input type="radio" name="HHg">g
<input type="radio" name="HHh">h
</td>
</tr>
<tr>
<td colspan="2"><input name="keisan" type="button" value="計算" onClick="col1()">
<input name="reset" type="reset" value="リセット"></td>
</tr>
<tr>
<td>II</td>
<td><input type="text" name="II"></td>
</tr>
<tr>
<td>JJ</td>
<td><input type="text" name="JJ"></td>
</tr>
</table>
</form>
</body>
</html>

回答No.2

yambejp

同じような質問を何度もなさるのはソースを理解していないからでしょうか？
いままでの質問の回答のソースも、さほど特殊なことをやっているわけでは
ないですし、もし理解されていないなら自問なさっているとおり、
質問者さんには「無理な計算表」なのだと思います。
今後ともこのような課題が発生するのであれば、どなたかWEBプログラマの方に
コンサルについてもらった方がよいと思います。

また、質問者さんがなさっているのは「質問」というよりはむしろ
「作業依頼」に近いものです。
このサイトでは禁止されている行為ですので、もし万が一理解する気が
希薄で、他人にプログラムを書いてほしいという依頼であれば、
そういう趣旨のサイトを探してそちらに投稿してください。

回答No.1

kokorone

丸投げは、やめましょう。
すべてを満たす回答があった場合、自分で理解しないまま使ってしまい
がちです。
複雑な仕様の場合、ポイントを絞り、ご自分で理解できる単位で、
質問してください。

補足

kokoroneさん
分からないので質問させて頂いています。
計算も複雑なので、ポイントを絞るにしても連動しているので難しい部分があると思い、投稿させて頂きました。

無理な計算表なのでしょうか？