[新着] Webテンプレートを仮オープンしました
<form action="#">
<fieldset>
<legend>グループ名</legend>
<input type="radio" name="Dev" value="Dev0" onclick="ChangeDevTable(this);" checked>ラジオボタン１
<input type="radio" name="Dev" value="Dev1" onclick="ChangeDevTable(this);">ラジオボタン２
<input type="radio" name="Dev" value="Dev2" onclick="ChangeDevTable(this);">ラジオボタン３
<input type="radio" name="Dev" value="Dev3" onclick="ChangeDevTable(this);">ラジオボタン４
</fieldset>
</form><table id="Dev1" summary="">
<tr>
<td>
<form action="#" id="frmPtSl1"><!-- id="formPtSl0", "formPtSl2", etc. -->
<fieldset>
<legend>グループ名</legend>
<input type="radio" name="section" value="sec0" onclick="ChangeDevTable(this);" checked>切替後ラジオボタン１<br>
<input type="radio" name="section" value="sec1" onClick="ChangeDevTable(this);">切替後ラジオボタン２
</fieldset>
</form>
</td>
</tr>
</table> <style type="text/css">
#Dev1, #Dev2, #Dev3 { display: none; }
</style><script type="text/javascript">
function ChangeDevTable (radio) {
var radioGroup = radio.form.elements[radio.name];
var table, form;
for (var i = 0, I = radioGroup.length; i < I; i++) {
table = document.getElementById (radioGroup[i].value);
form = document.getElementById ('PtSl' + i);
if (! radioGroup[i].checked) {
table.style.display = 'none';
form.reset ();
} else {
table.style.display = 'block';
}
}
}
</script><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>TEST</title>
<style type="text/css">
#Dev0, #Dev1,
#Sec0, #Sec1 { display: none; }
</style>
<script type="text/javascript">
function changeDevTable (evt) {
var target = evt.target || evt.srcElement;
if (target.nodeName == 'INPUT' && target.type == 'radio') {
var radios = target.form.elements[target.name];
var radio, table, form;
for (var i = 0, I = radios.length; i < I; i++) {
radio = radios[i];
table = document.getElementById (radio.value);
form = document.getElementById (radio.value + '-frmPtSl');
if (radios[i] == target) {
table.style.display = 'block';
} else {
table.style.display = 'none';
form.reset ();
}
}
}
}
</script>
<!--==================== Control Panel ====================-->
<form action="#" onclick="changeDevTable (event); ">
<p>
<input type="radio" name="Dev" value="Dev0" checked="checked">Dev0
<input type="radio" name="Dev" value="Dev1">Dev1
</p>
</form>
<!--==================== Table Group: "Dev" ====================-->
<table summary="" id="Dev0">
<tr>
<td>
<form action="#" id="Dev0-frmPtSl" onclick="changeDevTable (event); ">
<fieldset>
<legend>Dev0</legend>
<input type="radio" name="Sec" value="Sec0" checked="checked">Sec0
<input type="radio" name="Sec" value="Sec1">Sec1
</fieldset>
</form>
</td>
</tr>
</table>
<table summary="" id="Dev1">
<tr>
<td>
<form action="#" id="Dev1-frmPtSl" onclick="changeDevTable (event); ">
<fieldset>
<legend>Dev1</legend>
<input type="radio" name="Sec" value="Sec0" checked="checked">Sec0
<input type="radio" name="Sec" value="Sec1">Sec1
</fieldset>
</form>
</td>
</tr>
</table>
<!--==================== Table Group: "Sec" ====================-->
<table summary="" id="Sec0">
<tr>
<td>
<form action="#" id="Sec0-frmPtSl">
<fieldset>
<legend>Sec0</legend>
<input type="radio" name="dummy" checked="checked">Dm0
<input type="radio" name="dummy">Dm1
</fieldset>
</form>
</td>
</tr>
</table>
<table summary="" id="Sec1">
<tr>
<td>
<form action="#" id="Sec1-frmPtSl">
<fieldset>
<legend>Sec1</legend>
<input type="radio" name="dummy" checked="checked">Dm2
<input type="radio" name="dummy">Dm3
</fieldset>
</form>
</td>
</tr>
</table>