gpt4 book ai didi

javascript - 根据复选框的选择设置 div

转载 作者:太空宇宙 更新时间:2023-11-04 05:01:30 24 4
gpt4 key购买 nike

我在页面顶部有 4 个复选框,并且有 4 个对应的 div 元素。如果选中相应的复选框并隐藏其他 div,我需要显示 div。我已经做到了这一点,但无法正确定位它们。

例如,如果我选择了第3个复选框,那么第3个复选框对应的div应该显示在顶部。然后,如果我选择第一个复选框,则应首先显示与第一个复选框对应的 div,然后显示与第三个复选框对应的 div。然后,如果我选择第二个复选框,第二个 div 应该显示在第一个和第三个 div 之间。

隐藏功能工作正常。但是关于 div 的位置,第三个 div 显示在第三个位置(意味着页面顶部有一个空间对应于前两个 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”来设置位置但不确定如何使用它。请帮助...

最佳答案

visibility:hidden 使 div 不出现但仍然存在于布局中。

带有display:none的元素会被隐藏,页面会像没有该元素一样显示

编辑

这是我如何让它工作的JSFiddle

关于javascript - 根据复选框的选择设置 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11415980/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com