How do I create a checkbox statement in onclick attribute?

Question

I've been trying to figure this out for 2 days, but I couldn't find any solutions.

What I want is, every time I check the checkbox, an element's property will change(i.e. BGcolor of the body). but it only works when the checkbox is checked, but it doesn't work when the checkbox is unchecked.

var checkboxStatus = document.getElementById("menuCheckBox");
function menuToggle() {
    if (checkboxStatus.checked = true) {
        document.body.style.background = "cyan";
    } else {
        document.body.style.background = "magenta";
    }
}
menuToggle();

<input id="menuCheckBox" type="checkbox" onclick="menuToggle()"/>

atultw · Answer 1 · 2021-03-31T02:28:42.197

You're on the right track, just wrong use of operators. You used a single = instead of two. Boolean statements (comparison) needs two equals signs. https://www.guru99.com/difference-equality-strict-operator-javascript.html

var checkboxStatus = document.getElementById("menuCheckBox");
function menuToggle() {
    if (checkboxStatus.checked == true) {
        document.body.style.background = "cyan";
    } else {
        document.body.style.background = "magenta";
    }
}
menuToggle();

<input id="menuCheckBox" type="checkbox" onclick="menuToggle()"/>

You can also omit the == true entirely, as a true boolean statement is true itself without being compared to true.

Nguyễn Văn Phong · Answer 2 · 2021-03-31T02:36:05.237

Problem: In this line

if (checkboxStatus.checked = true) {

Solution: There are 2 ways to resolve your problem:

Make == instead like this: if (checkboxStatus.checked == true) {
Remove = like this: if (checkboxStatus.checked) {

Explain:

= is the assignment operator. It sets a variable (the left-hand side) to a value (the right-hand side).
== is the comparison operator. It will tell you whether or not two values are equivalent regardless of the type of the operands.

Read more:

Refactor code:

var checkboxStatus = document.getElementById("menuCheckBox");
function menuToggle() {
    const backGroundCorlor = checkboxStatus.checked ? "cyan" : "magenta";
    document.body.style.background = backGroundCorlor;
}
menuToggle();

<input id="menuCheckBox" type="checkbox" onclick="menuToggle()"/>

Does this answer your question? Let me know if you need any help. @Vladd Cantor https://stackoverflow.com/help/someone-answers — Nguyễn Văn Phong, Mar 31 '21 at 07:23

score 0 · Answer 3 · answered Mar 31 '21 at 02:54

here you go

function colorchange() {
  if (document.getElementById('checker').checked) {
    document.body.style.backgroundColor = "orange";
  } else {
    document.body.style.backgroundColor = "grey";
  }
}

body {
  background-color: grey;
}

<input type="checkbox" onclick="colorchange();" id="checker"></input>

How do I create a checkbox statement in onclick attribute?

3 Answers3