javascript - 如果已选中复选框，则使用 JavaScript 更改 CSS 可见性

Question

在下面的代码片段中，当复选框被选中时，蓝色 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>

Answer 1

这就是你想要的。 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 语句中什么都不做。要比较值，您必须使用两个，如上所示。

最后，您只检查一次以查看复选框是否被选中，而不是相反。那只会工作一次，永远不会显示相反的情况。