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

首先，在您的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";
}

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";

    }
}

注意一些语法。在你的代码中，只有一个＆＃34; =＆＃34;它设定了一个值。这在if语句中什么也不做。要比较值，您必须使用两个，如上所示。

最后，您只检查一次是否检查了复选框，而不是相反。那只会工作一次，而且永远不会出现相反的情况。

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

2 个答案: