フォーム内の二つのテーブルのうち一つのテーブル内のオブジェクトの内容のみをクリアしたい

質問

フォーム内にテーブルを二つ作成しました。
テーブル１の中のあるチェックボックスのチェックが入っているかいないかにより
テーブル２のオブジェクト（テキスト、ラジオボタン、チェックボタン）の内容を全てクリアしたいのです。
テキストは中身を消して、ラジオボタン、チェックボタンはチェックを
はずしたいということです。
テーブル１はそのままで、テーブル２のみ初期状態にしたいのです。
まとめてクリアしたいのですが、出来ないのでしょうか？

回答No.1

yambejp · ベストアンサー

多少冗長になりますがたとえばこんな感じで・・・

<script>
window.onload=function(){
var tag=document.getElementById("c0");
if(tag) tag.onclick=hoge;
var tags=document.getElementById("t1").getElementsByTagName("input");
if(tags) for(var i=0;i<tags.length;i++){
tags[i].onchange=fuga;
}
var tags=document.getElementById("t1").getElementsByTagName("select");
if(tags) for(var i=0;i<tags.length;i++){
tags[i].onchange=fuga;
}
}

function hoge(){
if(this.checked) return true;
var tags=document.getElementById("t1").getElementsByTagName("input");
for(var i=0;i<tags.length;i++){
if(tags[i].type=="checkbox") tags[i].checked=false;
if(tags[i].type=="radio") tags[i].checked=false;
if(tags[i].type=="text") tags[i].value="";
}
var tags=document.getElementById("t1").getElementsByTagName("select");
for(var i=0;i<tags.length;i++){
tags[i].selectedIndex=0;
}
return true;
}
function fuga(){
var tag=document.getElementById("c0");
if(this.type=="checkbox" && this.checked) tag.checked=true;
if(this.type=="radio" && this.checked) tag.checked=true;
if(this.type=="text" && this.value!="") tag.checked=true;
if(this.type=="select-one" && this.selectedIndex>0) tag.checked=true;
}
</script>
<table border id="t0">
<tr><td><input type="checkbox" id="c0"></td></tr>
</table>
<hr />
<table border id="t1">
<tr><td>checkbox</td>
<td><input type="checkbox">
</td></tr>
<tr><td>radio</td>
<td><input type="radio" name="xxx">
<input type="radio" name="xxx">
<input type="radio" name="xxx"></td></tr>
<tr><td>text</td>
<td><input type="text">
<input type="text">
<input type="text"></td></tr>
<tr><td>select</td>
<td><select>
<option value="">デフォルト</option>
<option value="1">1</option>
<option value="2">2</option></td>
</tr>
</table>

お礼

できました。
ありがとうございます。