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

Question

在下面的 sn-p 中，选中复选框时蓝色 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

document.getElementById("inputId").style.visibility = document.getElementById("checkboxId").checked ? "visible" : "hidden";

Answer 2

这就是你想要的。 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 语句中执行任何操作。要比较值，您必须使用两个，如上所示。

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

Answer 3

首先，在您的 HTML 中，您有两个元素。在 JavaScript 中，最简单的做法是获取并保存对两者的引用。

var box = document.getElementById('box');
var checkbox = document.getElementById('check');

然后您需要监听复选框的更改。没有“已检查”事件，因此您需要监听任何“更改”。

// Put the 'event listener' on the 'check' element. 
// It will run when the checkbox changes (is checked or unchecked)
checkbox.addEventListener('change', function(){
    alert('changed');
});

最后，您可以在事件侦听器中添加更多代码来执行检查以查看复选框的状态是否已选中。

checkbox.addEventListener('change', function(){
    alert('changed');
    // The checkbox element 'check' has a property 'checked' that you can access
    // If it is checked set the color one way, otherwise the other.
    if(checkbox.checked) {
        box.style.backgroundColor = 'red';
    } else {
        box.style.backgroundColor = 'lightblue';
    }
});

Here is a fiddle

如需进一步阅读，您可以查看 getElementById 和 EventListeners 以及 Style Object

关于您的 javascript 的注释

if (document.getElementById("check".checked = "true")) {
      document.getElementById("box").style.visibility = "hidden";
}

IF 语句中的代码是正确的。 IF 语句本身试图一次做太多的事情。您可能刚刚忘记了一对右括号或将其放在错误的位置。但您也可以省略对“真”的显式检查。尝试将下面的代码放入事件侦听器中。

if (document.getElementById("check").checked) {
    document.getElementById("box").style.visibility = "hidden";
}