toggle checkbox with javascript

Question

I want to uncheck a checkbox using javascript. I have one button which just unchecks the box and works fine:

function clear() {
document.getElementById("check").checked = "";
}

I have another button that I want to check the box if not checked and uncheck if it is. Below doesn't uncheck the box. I can can switch the if statement and does works the opposite way. What's the problem?

function switchIt() {
if (document.getElementById("check").checked !== "checked") {
  document.getElementById("check").checked = "checked";
} else {
  document.getElementById("check").checked = "";
}

Thanks!

Possible duplicate of How to uncheck a checkbox in pure JavaScript? — A. Meshu
– A. Meshu, Commented Mar 6, 2019 at 21:58

Taki · Accepted Answer · 2019-03-06 22:03:31Z

4

switch is a reserved word, use another one

function switchIt() {
  var box = document.getElementById("check");
  
  if (box.checked) {
    box.checked = false;
  } else {
    box.checked = true;
  }
}

setInterval(switchIt, 1000);

<input type="checkbox" id="check" />

answered Mar 6, 2019 at 22:03

Taki

17.7k5 gold badges28 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stuart Durning Over a year ago

switch wasn't the actual name. Tried this and works perfectly so thanks @taki

Pete · Accepted Answer · 2019-03-06 21:59:51Z

2

Treat "checked" as a boolean, not as a string.

You can just invert it, as in

element = document.getElementById("check")
element.checked = !element.checked

A more featured example:

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



var toggle_checkbox = function() {
   $checkbox.checked = !checkbox.checked;
}

$toggle.addEventListener('click',toggle_checkbox);

<label>
  Checkbox:
  <input id="checkbox" type="checkbox" checked />
</label>
<button id="toggle">Toggle</button>

answered Mar 6, 2019 at 21:59

Pete

4,6329 gold badges48 silver badges77 bronze badges

Comments

Michel Calheiros · Accepted Answer · 2019-03-06 22:00:06Z

1

You need a boolean to do that.

Take a look at this pen:

https://codepen.io/anon/pen/jJyXgO

let checkbox = document.querySelectorAll('#check')[0]

setInterval(function() {
  checkbox.checked = !checkbox.checked
}, 1000)

answered Mar 6, 2019 at 22:00

Michel Calheiros

9715 silver badges10 bronze badges

Comments

Wayneio · Accepted Answer · 2019-03-06 22:05:31Z

0

I've never seen it done with a string "checked" before. Try with a boolean like:

function change() {
    if (document.getElementById("check").checked !== true) {
      document.getElementById("check").checked = true;
    } else {
      document.getElementById("check").checked = false;
    }
}

or easier

function change() {
    document.getElementById("check").checked = !document.getElementById("check").checked
}

Don't forget, switch is reserved, so use a different name, as I did with change()

edited Mar 6, 2019 at 22:05

answered Mar 6, 2019 at 21:58

Wayneio

3,5969 gold badges47 silver badges78 bronze badges

Collectives™ on Stack Overflow

toggle checkbox with javascript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related