在下面的代码片段中,当复选框被选中时,蓝色 div 应该隐藏。然而,事实并非如此。我尝试了很多不同的语法,但到目前为止还没有成功。
if (document.getElementById("check".checked = "true")) {
document.getElementById("box").style.visibility = "hidden";
}
#box {
background: lightblue;
width: 200px;
height: 200px;
}
<input type="checkbox" id="check">
<div id="box"></div>
最佳答案
这就是你想要的。 http://jsfiddle.net/3ywqy72w/8/
您在上面放置的代码存在很多问题。
在 HTML 中,您需要为 javascript 调用一个函数,以便在单击复选框后执行某些操作。看起来像这样:
<input type="checkbox" id="check" onclick="toggleBoxVisibility()">
在 Javascript 中,您也没有创建将用于在调用 onClick 后执行代码的函数。这是它的样子:
function toggleBoxVisibility() {
if (document.getElementById("check").checked == true) {
document.getElementById("box").style.visibility = "visible";
}
else {
document.getElementById("box").style.visibility = "hidden";
}
}
注意一些语法。在您的代码中,只有一个设置值的“=”。这在 if 语句中什么都不做。要比较值,您必须使用两个,如上所示。
最后,您只检查一次以查看复选框是否被选中,而不是相反。那只会工作一次,永远不会显示相反的情况。
关于javascript - 如果已选中复选框,则使用 JavaScript 更改 CSS 可见性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33743087/