Changing CSS visibility with JavaScript if a checkbox has been checked

Question

In the snippet below, blue div should hide when the checkbox is checked. Yet, it doesn't. I've tried a lot of different syntax, but no luck so far.

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

Here is what you wanted. http://jsfiddle.net/3ywqy72w/8/

There were many problems with the code you have placed above.

In the HTML, you need to call a function for javascript to do something once the checkbox is clicked. That looks like this:

<input type="checkbox" id="check" onclick="toggleBoxVisibility()">

In the Javascript, you also did not create the function that will be used to make code happen once the onClick is called. This is what that looks like:

function toggleBoxVisibility() {

if (document.getElementById("check").checked == true) {

    document.getElementById("box").style.visibility = "visible";

    } 
else {

    document.getElementById("box").style.visibility = "hidden";

    }
}

Note some of the syntax. In your code, there was only one "=" which sets a value. This will do nothing in an if statement. To compare values, you must use two as shown above.

Lastly, you were only checking once to see if the checkbox was checked and not the other way around. That would only work once and would never display the opposite case.

Answer 2

First, in your HTML you have two elements. In JavaScript the easiest thing to do is get and save references to both.

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

Then you'll need to listen for changes to your checkbox. There is no 'checked' event, so you'll need to listen for any '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');
});

Lastly within the event listener you can add more code to perform a check to see if the status of the checkbox is checked.

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

For further reading you could review the getElementById and EventListeners and the Style Object

As a note about your javascript

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

The code inside IF statement is correct. The IF statement itself tries to do too many things at once. You may have just forgotten one pair of closing parenthesis or put it in the wrong place. But you can also leave out the explicit check for 'true'. Try putting the code below within the event listener.

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