ページの上に 4 つのチェックボックスがあり、対応する div 要素が 4 つあります。対応するチェックボックスが選択され、他のdivが非表示になっている場合は、divを表示する必要があります。私はこれを達成しましたが、それらを適切に配置することができませんでした.
たとえば、3 番目のチェックボックスを選択すると、3 番目のチェックボックスに対応する div が上部に表示されます。次に、最初のチェックボックスを選択すると、最初のチェックボックスに対応する div が最初に表示され、次に 3 番目のチェックボックスに対応する div が表示されます。次に、2 番目のチェックボックスを選択すると、2 番目の div が 1 番目と 3 番目の div の間に表示されます。
非表示機能は正常に機能します。しかし、div の位置に関しては、3 番目の div が 3 番目の位置に表示されています (つまり、最初の 2 つの div に対応するページの上部にスペースがあります)。以下は、私が使用するhtmlファイルとjavaスクリプトです。
<html>
<head>
<title>Checkbox Event Handler</title>
<script type="text/javascript">
function toggle(chkbox, group) {
var visSetting = (chkbox.checked) ? "visible" : "hidden";
document.getElementById(group).style.visibility = visSetting;
document.getElementById(group).style.position = absolute;
}
function hideLayer() {
document.getElementById('myGroup1').style.visibility = 'hidden';
document.getElementById('myGroup2').style.visibility = 'hidden';
document.getElementById('myGroup3').style.visibility = 'hidden';
document.getElementById('myGroup4').style.visibility = 'hidden';
}
</script>
</head>
<body onload="hideLayer();">
<form>
<input type="checkbox" name="section1" onclick="toggle(this, 'myGroup1')" />Section1
<input type="checkbox" name="section2" onclick="toggle(this, 'myGroup2')" />Section2
<input type="checkbox" name="section2" onclick="toggle(this, 'myGroup3')" />Section3
<input type="checkbox" name="section2" onclick="toggle(this, 'myGroup4')" />Section4
<div id="myGroup1" >
<table >
<tr><td>ID </td><td><input type="text" name ="tid" id="tid" size="20"></input></td></tr>
<tr><td>Name </td><td><input type="text" name = "tname" id="tname" size="20"></td></tr>
<tr><td>Height </td><td><input type="text" name = "theight" id="theight" size="20"></td></tr>
<tr><td>Location </td><td><input type="text" name = "tloc" id="tloc" size="20"></td></tr>
</table>
</div>
<div id="myGroup2" >
<table>
<tr><td><input type="button" name ="B1" id="B1" value="SomeName" ></td>
<td><input type="button" name ="B2" id="B2" value="Retrieve" >
<input type="button" name ="B3" id="B3" value="Retrieve All" >
<input type="button" name ="B4" id="B4" value="Load Data" >
</td></tr>
</table>
</div>
<div id="myGroup3">
<table >
<tr><td>City </td><td><input type="text" name = "tcity" id="tcity" size="20"></td></tr>
<tr><td>State </td><td><input type="text" name = "tstate" id="tstate" size="20"></td></tr>
<tr><td>Country </td><td><input type="text" name = "tcountry" id="tcountry" size="20"></td></tr>
</table>
</div>
<div id="myGroup4">
<table>
<tr><td><input type="button" name = "B4" id="B4" value="SomeButton" ></td>
<td><input type="button" name ="B5" id="B5" value="Store" >
<input type="button" name ="B6" id="B6" value="Clear All" >
<input type="submit" name ="B7" id="B7" value="Submit"></td></tr>
</table>
</div>
</form>
</body>
</html>
「document.getElementById(group).style.position = absolute」を使用して位置を設定しますが、これを使用する方法がわかりません。助けてください...