我已经阅读了几个例子，但我仍然不能让它正常工作。我只是想通过单击复选框使 DIV 可见和不可见。我是否正确编写了 JavaScript 代码？
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SimpleSample - Hidden Div</title>
</head>
<script type="text/Javascript">
function showhideDiv1() {
if (document.getElementyById('div1').style.display = "none") {
//show the div:
document.getElementById('div1').style.display = "block";
}
else {
//hide the div:
document.getElementById('div1').style.display = "none";
//clear the form:
//document.getElementById('myform').reset();
}
}
function showhideDiv2() {
if (document.getElementyById('div2').style.display = "none") {
//show the div:
document.getElementById('div2').style.display = "block";
}
else {
//hide the div:
document.getElementById('div2').style.display = "none";
//clear the form:
//document.getElementById('myform').reset();
}
}
</script>
<body>
<form id="myform" name="myform" method="post" action="">
<div id="div1">
<p>Content for id "div1" Goes Here</p>
<table width="800" border="0">
<tr>
<td>First Name</td>
<td><input name="fname" type="text" id="fname" value="" /></td>
</tr>
<tr>
<td>Last Name</td>
<td><input name="lname" type="text" id="lname" value="" /></td>
</tr>
</table>
</div>
<div id="div2">
<p>Content for id "div2" Goes Here</p>
<table width="800" border="0">
<tr>
<td width="258">Email</td>
<td width="532"><input name="emailAddr" type="text" id="emailAddr" value="" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="div3">
<p>Content for id "floatingDiv" (when ready) Goes Here</p>
<table width="800" border="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input onchange="showhideDiv1();" name="showDiv1Chk" type="checkbox" id="showDiv1Chk" checked="checked" />
- Show Div1</td>
<td> </td>
</tr>
<tr>
<td><input onchange="showhideDiv2();" name="showDiv2Chk" type="checkbox" id="showDiv2Chk" checked="checked" />
- Show Div2</td>
<td> </td>
</tr>
</table>
</div>
<p> </p>
</form>
</body>
</html>
谢谢!
最佳答案
您将“getElementById”与“getElementyById”拼错了两次。
此外，在您的 if 语句中，确保使用“==”而不是“=”进行比较。
错误:
if (document.getElementById('div1').style.display = "none")
右:
if (document.getElementById('div1').style.display == "none")
应该在这些更改后工作。
关于javascript - DIV 'inline-block' 或无使用复选框不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16761880/