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>

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>

• javascript
• css
• checkbox
• checked

• 1 Please post your code in the question. – Josh KG Commented Nov 16, 2015 at 19:36
• document.getElementById("check".checked = "true") u need double == in if-statements – Salmin Skenderovic Commented Nov 16, 2015 at 19:36
• 1 @SalminSkenderovic if you think that's the only problem with that code, you might need to pay attention to the answer when it es. – Josh KG Commented Nov 16, 2015 at 19:38
• IIRC, I need triple === for parisons. I tried =, == and ===, none worked. I also tried "true" and true (without quotes)... I don't know what else to try. – SoKeT Commented Nov 16, 2015 at 19:38
• 1 Stack Overflow requires that relevant code be pasted into the question itself, NOT only available via an external link. – jfriend00 Commented Nov 16, 2015 at 19:42

3 Answers 3

Here is what you wanted. http://jsfiddle/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 pare 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.

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

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