チェックボックスとテキストボックスを連動させたい

JavaScriptでチェックボックスにチェックが入るとテキストボックス自動で数字の1が入る仕組みを作っています。

以下のソースまではかけたのですが
列はそれほどないのですがと行数が多数存在します。
ファンクションが一つで済む方法はありませんでしょうか。
またデータを配列で送信したいのですが配列ですと動きません。

是非教えて頂けると幸いです。

<SCRIPT LANGUAGE="JavaScript">
function check1(radio) {

//チェックボックスにチェックが入った場合
if(radio.checked) {
form = radio.form;
form.data1[1].value = radio.value;
form.data1[2].value = radio.value;
form.data1[3].value = radio.value;
form.data1[4].value = radio.value;
}else{
//チェックが外された場合
form = radio.form;
form.data1[1].value = "";
form.data1[2].value = "";
form.data1[3].value = "";
form.data1[4].value = "";
}

}
function check2(radio) {

//チェックボックスにチェックが入った場合
if(radio.checked) {
form = radio.form;
form.val5.value = radio.value;
form.val6.value = radio.value;
form.val7.value = radio.value;
form.val8.value = radio.value;
}else{
//チェックが外された場合
form = radio.form;
form.val5.value = "";
form.val6.value = "";
form.val7.value = "";
form.val8.value = "";
}

}


</SCRIPT>


<FORM METHOD="POST">
<INPUT TYPE="checkbox" NAME="r" VALUE="1" onclick="check1(this)">チェック1<BR>
<INPUT NAME="data1[1]" SIZE="1">
<INPUT NAME="data1[2]" SIZE="1">
<INPUT NAME="data1[3]" SIZE="1">
<INPUT NAME="data1[4]" SIZE="1"><br>
<INPUT TYPE="checkbox" NAME="r" VALUE="1" onclick="check2(this)">チェック2<BR>
<INPUT NAME="val5" SIZE="1">
<INPUT NAME="val6" SIZE="1">
<INPUT NAME="val7" SIZE="1">
<INPUT NAME="val8" SIZE="1">

</FORM>

No.2 ベストアンサー 回答者： yambejp 回答日時： 2011/10/15 16:34

ソース拝見しました。

テーブルなんですね？tdをdivでくくるのは文法違反なのでNGです。
テーブルは行ごとにTRで括られているのでそれを使いましょう。

要件としては同じ行の自分より後ろのテキストボックスに
値をいれるなら以下のようにできます。
またバリデータの絡みもあるかもしれないのでとりあえずcheckxとしておきます。
（適当に工夫して名前付けしてください）

<script>
function checkx(radio){
var f=radio.form;
var tr=getParentNode(radio,'TR');
var td=getParentNode(radio,'TD');
for(var i=0;i<f.length;i++){
if(f[i].type=="text" && getParentNode(f[i],'TR')==tr && td.cellIndex < getParentNode(f[i],'TD').cellIndex) f[i].value=radio.checked?radio.value:"";
}
}
function getParentNode(obj,nodename){
var n=obj.parentNode;
while(n){
if(n.nodeName==nodename) return n;
n=n.parentNode;
}
return null;
}
</script>

この回答へのお礼

ありがとうございます。
おかげさまで無事に解決致しました。

非常に助かりました。

お礼日時：2011/10/17 13:28

No.1 回答者： yambejp 回答日時： 2011/10/15 11:32

配置的にちかいところにあるなら、divなどまとめてしまうとよいでしょう

<script>
function check(radio){
var f=radio.form;
for(var i=0;i<f.length;i++){
if(f[i].type=="text" && f[i].parentNode==radio.parentNode) f[i].value=radio.checked?radio.value:"";
}
}
</script>
<FORM METHOD="POST">
<div>
<INPUT TYPE="checkbox" NAME="r" VALUE="1" onclick="check(this)">チェック1<BR>
<INPUT NAME="data1[1]" SIZE="1">
<INPUT NAME="data1[2]" SIZE="1">
<INPUT NAME="data1[3]" SIZE="1">
<INPUT NAME="data1[4]" SIZE="1"><br>
</div>
<div>
<INPUT TYPE="checkbox" NAME="r" VALUE="1" onclick="check(this)">チェック2<BR>
<INPUT NAME="val5" SIZE="1">
<INPUT NAME="val6" SIZE="1">
<INPUT NAME="val7" SIZE="1">
<INPUT NAME="val8" SIZE="1">
</div>

</FORM>

この回答への補足

ありがとうございます。
まさにこのとおりの動きです。

しかし、実サイトに導入するするとうまく動きません。
同時にバリデーションも行なっているせいでしょうか。

http://roba33.com/check/

補足日時：2011/10/15 13:01

この回答へのお礼

お礼が抜けていました。
ありがとうございました。

お礼日時：2012/05/17 10:06