チェックボックスの入力チェックとデータの転送について

質問

質問させてください.
ちょっとわかりにくいかもしれないのですが、
・親ウィンドウ（A.html）と子ウィンドウ（B.html）があります。
・子ウィンドウではチェックボックスを使って選択するページです。チェックは複数選択するときもあります。
・チェックをつけたチェックボックスの”value”を親ウィンドウのセル（td　id=ma1）に表示させる。

ということをやりたいと思っています。

その場合に、
まず、子ウィンドウで、チェックボックスがチェックされているか確認するScriptは、チェックボックスの数だけつくって、チェックされていたらひとつづつ親ウィンドウのセルに表示させていくのがいいのでしょうか？

また、二つ目のvalueの情報を、違うセル（td　id=ma2）に表示させる場合はどうすればいいのでしょうか?

もし、もっと違う効率的なやり方があったら教えていただきたいと思い質問させていただきました。

回答No.4

wolfwood · ベストアンサー

wolfwoodです。
表内のフォームの書き方ですが複数に分けなくても良いです。

例）

<TABLE border=1>
<FORM name="form_1">
<TR>
<TD><INPUT type="checkbox" name="ck1" value="data1" onClick="test(1)"></TD>
<TD>1*****</TD>
</TR>
<TR>
<TD><INPUT type="checkbox" name="ck2" value="data2" onClick="test(2)"></TD>
<TD>2*****</TD>
</TR>
<TR>
<TD><INPUT type="checkbox" name="ck3" value="data3" onClick="test(3)"></TD>
<TD>3*****</TD>
</TR>
<TR>
<TD><INPUT type="checkbox" name="ck4" value="data4" onClick="test(4)"></TD>
<TD>4*****</TD>
</TR>
</FORM>
</TABLE>

こんな感じです。
フォームまで分けてしまうと記述も面倒ですから。
一つのフォームオブジェクトの中の複数のチェックボックスの部品を扱う（コントロールする）感じでやるとイメージしやすいですしね。
FORMタグは<FORM>～</FORM>で囲まれた部分を一つのオブジェクトとして扱います。
その間にある部品（ボタン、テキストボックスなど）を扱うときのグループ枠みたいなものですね。
間に他のタグ（テーブルなど）があっても基本的に関係ありません。
（全く無い訳ではないです。配置次第で表示が微妙に変わったり、フォームの入れ子は出来ないとかあります）
ＨＰビルダーとかお使いですか？
ビルダー系によくあることですが、フォーム部品（<INPUT>など）を配置するたびにFORMタグを付けてしまいソースの見栄えが悪くなります。
整理すると結構すっきりしますよ。

どうしても、フォームを分けたい場合は
スクリプト内のフォーム名も動的に変えていけば良いです。

例）
eval("document.form"+num+".ck"+num+".checked")

こんな感じです。

お礼

たびたびご親切に解説していただきありがとうございます.とぉってもわかりやすくて、感激して泣けてきます。
ほんとわかりました。
ありがとうございます。
また、ご迷惑をおかけするかもしれませんがよろしくお願いいたします。

回答No.3

wolfwood

wolfwoodです。
動きませんか・・・？
こちらではIE5.5を使って確認済みです。
最初のスクリプトは動いていますよね？
何かしらエラーが出ていませんか？
例のスクリプトを以前のものと組み合わせる時はselの値を2にしてください。
注意する部分としてはセルの数の設定を親ウィンドウのセル(id)の数に合わせるというところです。
例えば、<TD id="ma1">～<TD id="ma10">まであったらスクリプトのselの設定を10にしてください。
あと、エラーが出ていたら教えてください。

お礼

wolfwood 様御礼が遅くなり申し訳ありません。
ご親切にいろいろありがとうございました．
あと、１つだけ質問があるのですが、（厚かましくてすみません。）表の中にチェックボックスを入れると＜Form＞がたくさんできますよね。
<form name="form1" method="post" action="">
<td height="20" width="42" align="center" bgcolor="#FFFFFF">

<input type="checkbox" name="checkbox1" value="checkbox" onClick="chktest(1)">

</td>
</form>
<td width="231" bgcolor="#CCFFFF">キシロカインショック</td>
<td width="10"></td>
</tr>
<tr>
<form name="form2" method="post" action="">
<td height="20" width="42" align="center">

<input type="checkbox" name="checkbox2" value="checkbox" onClick="chktest(2)">

</td>
</form>
<td width="231">抗リン剤禁</td>
<td width="10"></td>
</tr>
<tr>
<form name="form3" method="post" action="">
<td height="20" width="42" align="center" bgcolor="#FFFFFF">

<input type="checkbox" name="checkbox3" value="checkbox" onClick="chktest(3)">

</td>
</form>
見たいな感じですよね。
このコードで質問させていただいたようなことをやるのには、フォームとにすべて（num）とできるように数字で書いていけばOKなのでしょうか？
すみませんたびたび勉強不足で、本とご迷惑をおかけいたしてます．

回答No.2

wolfwood

wolfwoodです。
チェックされた順番にセルに入れるのは簡単ですが、
外された場合はそのセルが空いてしまいます。
外された場合順番を詰めて再表示するような処理にしてみました。
配列を使ってちょっと面倒なスクリプトですが・・・。
配列処理のあたりはもっと簡単に出来るかもしれません。

例）子ウィンドウのスクリプト部分

<SCRIPT>
var aa = new Array;//チェックされた値を入れる配列
var bb = new Array;//配列の順番を詰めるための配列
var sel = 3;//セルの数

function test(num){
//チェックされた時
if(eval("document.form_1.ck"+num+".checked")){
for(j=1;j<=sel;j++){
//空いている配列に値を入れ処理を抜ける
if(aa[j] == undefined){
aa[j] = eval("document.form_1.ck"+num+".value");
break;
}
}
//チェックを外された時
}else{
for(f=1;f<=sel;f++){
//外された値の入った配列を空にする
if(aa[f] == eval("document.form_1.ck"+num+".value")){
aa[f] = undefined;
}
}
}

//新しい配列に値を順番に詰め込む
var s = 1;
for(c=1;c<=sel;c++){
if(aa[c]){
bb[s] = aa[c];
s++;
}
}

//新しい配列の残りを空にする
while(s<=sel){
bb[s] = undefined;
s++;
}

//セルに挿入し、元の配列に値を入れ直す
for(n=1;n<=sel;n++){
if(bb[n]){
window.opener.eval("ma"+n).innerHTML = bb[n];
aa[n] = bb[n];
}else{
window.opener.eval("ma"+n).innerHTML = "　";
aa[n] = bb[n];
}
}
}
</SCRIPT>

補足

早速詳しく教えていただきありがとうございます。ただ、最初に教えていただいたHTML＆Javascriptにあとから教えていただいた配列のJavascriptを貼り付けてみたのですが、動作が何も起きません。
私が、勉強不足でどこででなくなっているのかがちょっとわからなくて、wolfwood様に本当にご迷惑尾おかけいたしまして申し訳ないのですが、なにとぞ、教えていただけると幸いです。
よろしくお願いいたします。また私も、勉強してさがしてみます。

回答No.1

wolfwood

eval関数をつかって動的にidやnameを生成すれば一つの関数で出来ると思います。
下記の例は値を表示するセルとチェックボックスが対になっている設定です。

例）
親ウィンドウのテーブル記述

<table border="1">
<tr>
<td id="ma1" width="30">　</td>
<td id="ma2" width="30">　</td>
</tr>
</table>

子ウィンドウ

<HTML>
<HEAD>
<SCRIPT>
function test(num){
if(eval("document.form_1.ck"+num+".checked")){
window.opener.eval("ma"+num).innerHTML= eval("document.form_1.ck"+num+".value");
}else{
window.opener.eval("ma"+num).innerHTML= "　";
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="form_1">
<INPUT type="checkbox" name="ck1" value="data1" onClick="test(1)">data1
<INPUT type="checkbox" name="ck2" value="data2" onClick="test(2)">data2
</FORM>
</BODY>
</HTML>

補足

wolfwood様さっそく教えていただき感激です。ありがとうございます。
ごめんなさいもし、できたらもうひとつ教えていただきたいのですが、チェックがついているものを親ウィンドウのセルに表示させるときに、例えば、チェックボックスが10個有り、そのうちの飛び飛びでチェックされていて、4つがチェックされているときに、親ウィンドウのセルの表示を、一番最初に表示したセルから続けて表示させるということってできるのでしょうか?もし、できたら大変お手数ですが、教えていただけないでしょうか？
いろいろ教えていただいているのにあつかましくてすみません。