如果已选中复选框，则使用 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

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

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

然后您需要监听复选框的变化。没有 'checked' 事件，因此您需要监听任何 'change'.

// 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 and EventListeners and the Style Object

关于您的 javascript

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

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

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

    }
}

注意一些语法。在您的代码中，只有一个设置值的“=”。这在 if 语句中什么都不做。要比较值，您必须如上所示使用两个。

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

Answer 3

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

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

Changing CSS visibility with JavaScript if a checkbox has been checked

javascript

css

checkbox

checked