I have a simple checkbox and am trying to determine if it is checked or not in JS.

var checkbox = document.getElementById('checkbox').checked;
console.log(checkbox);
if(checkbox == 'true'){
    console.log('test');
}

My first console.log() returns true or false as expected, however even if it never goes into the if() statement even when it is true.

What am I missing?

I have a simple checkbox and am trying to determine if it is checked or not in JS.

var checkbox = document.getElementById('checkbox').checked;
console.log(checkbox);
if(checkbox == 'true'){
    console.log('test');
}

My first console.log() returns true or false as expected, however even if it never goes into the if() statement even when it is true.

What am I missing?

• javascript
• html

9 Answers 9

To check if a checkbox is checked, you don't test it against "true" (String). Instead, you examine its checked property to see if that is true (Boolean). This bees even easier to deal with because an if condition always tests for "truthy" values in the first place, so you don't really need to add that you are testing for true.

var checkbox = document.getElementById('checkbox');
// Interpreted as "Is it true that checkbox.checked == true"?
if(checkbox.checked){
    console.log('test');
}

var checkbox = document.getElementById('checkbox').checked;
// Interpreted as "Is checkbox.checked.checked true?", which is 
// an error because the checkbox.checked property doesn't have
// a checked property and so checkbox.checked.checked will return
// undefined, which will be false when converted to a Boolean
if(checkbox.checked){
    console.log('test');
}

But, there is no need to check if a checkbox is checked. Just query the document for only checked checkboxes and whatever is returned is what you work with.

.querySelector() and .querySelectorAll() allow you to pass any valid CSS selector to them. .querySelector() will return the first element that matches the selector and .querySelectorAll() will return a node list (HTML Collection) of all matching elements.

document.querySelector("button").addEventListener("click", function(){
  // Query for only the checked checkboxes and put the result in an array
  let checked = document.querySelectorAll("input[type='checkbox']:checked");
  console.clear();
  // Loop over the array and inspect contents
  checked.forEach(function(cb){
    console.log(cb.value);
  });
});

<input type="checkbox" value="one"> One 
<input type="checkbox" value="two"> Two 
<input type="checkbox" value="three"> Three 
<input type="checkbox" value="four"> Four

<button>Get Checked Checkboxes</button>

Let's see your code:

var checkbox = document.getElementById('checkbox').checked;
console.log(checkbox);
if(checkbox == 'true'){
    console.log('test');
}

You are giving the checkbox name to a variable holding a boolean value

Change to

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

You are paring boolean to string

true == 'true'

is always false. Change to

if (checkbox.checked) {
    console.log('test');
}

You are using the id of checkbox

You probably have several checkboxes with the same id. If that is the case, change it to be a class and use

document.getElementsByClassName

instead. You will get an array and you will have to iterate it with a cycle.

You are trying to pare a boolean to a string. What you want is to pare bool to bool as you want.

var checkbox = document.getElementById('checkbox').checked;
console.log(checkbox);
if(checkbox == true){
    console.log('test');
}

Condition must be equal to true without the quotes, otherwise its paring to a string.

You are trying to check if boolean variable is equial to string "true" Just check

if(checkbox) {...}

Remove the quotes from around true.

if(checkbox === true){
    console.log('test');
}

Better yet (more concise):

if(checkbox){
    console.log('test');
}

It's not the same true an 'true'. Try doing console.log(true == 'true'), it will give false because the first one is a bolean value (true or false) while the second one is an string value ('any kind of text').

So to check the bolean correctly you should do:

var checkbox = document.getElementById('checkbox').checked;
console.log(checkbox);
if(checkbox == true){
    console.log('The checkbox is true');
}

Or even you can do:

var checkbox = document.getElementById('checkbox').checked;
console.log(checkbox);
if(checkbox){
    console.log('The checkbox is true');
}

Because checkbox is already a bolean and it will work with the if() statement. It's like doing true == true (that is true) and false == true (that is false), you are doing a redundant code.

Please remove the single quotes around true in your IF condition. It takes it as a string if you add quotes.

Try this:

if(checkbox == true){ ... }

This should work.

I'm not sure what was going on but when I had if(checkbox == true) I was getting the message saying true is not defined as if it was looking for a variable called true.

I changed it to using Jquery like so if($("#checkbox").is(':checked'))