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

質問

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 · ベストアンサー

ソース拝見しました。
テーブルなんですね？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>

お礼

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

非常に助かりました。

回答No.1

yambejp

配置的にちかいところにあるなら、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/