Click on the checkbox to activate it using JavaScript

Question

Click on the checkbox to activate it using JavaScript

I'm trying to use JavaScript to toggle the checkbox status when clicking a button. The first button is supposed to uncheck the box and it's working correctly:

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

However, I also have another button that should check the box if it's not checked and uncheck it if it is already checked. The code below doesn't seem to uncheck the box, even though switching the if statement works in the opposite way. Can anyone help me identify the issue?

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

Any assistance would be greatly appreciated! Thank you!

javascript checkbox

Answer 1

Answer №1

toggle is a reserved word, please choose a different one

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

setInterval(toggleCheckbox, 1000);

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

Answer 2

toggle is a reserved word, please choose a different one

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

setInterval(toggleCheckbox, 1000);

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

Answer 3

Answer №2

Consider "checked" as a boolean value, not as a string.

To toggle it, simply invert its current state like this:

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

Here's a more detailed example:

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

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

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

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

Answer 4

Consider "checked" as a boolean value, not as a string.

To toggle it, simply invert its current state like this:

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

Here's a more detailed example:

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

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

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

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

Answer 5

Answer №3

In order to achieve this, you will require a boolean.

Check out the following code snippet:

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

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

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

Answer 6

In order to achieve this, you will require a boolean.

Check out the following code snippet:

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

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

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

Answer 7

Answer №4

I've never witnessed the utilization of a string "checked" in this manner before. Consider using a boolean like so:

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

or you can simplify it with:

function toggle() {
    document.getElementById("toggleBtn").checked = !document.getElementById("toggleBtn").checked
}

Remember, switch is a reserved keyword, so make sure to pick a different name, just like I did with toggle()

Answer 8

I've never witnessed the utilization of a string "checked" in this manner before. Consider using a boolean like so:

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

or you can simplify it with:

function toggle() {
    document.getElementById("toggleBtn").checked = !document.getElementById("toggleBtn").checked
}

Remember, switch is a reserved keyword, so make sure to pick a different name, just like I did with toggle()

Click on the checkbox to activate it using JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Exclude a specific tag from a div in JavaScript

JavaScript Slideshow Transition Techniques

Importing XML data into a JavaScript variable using jQuery without displaying an alert message

What techniques can I use to generate a 3D visual effect by shifting the background image layer as the user scrolls (creating a Parallax effect

Is it possible for an AngularJS directive to compile a fresh element that has a second directive assigned to it?

When using JSON stringify, double quotes are automatically added around any float type data

Transforming a single object into multiple arrays using AngularJS

Transferring data between actions following an AJAX request in Zend Framework

"Utilizing jQuery to apply a class based on the attributes of CSS

Utilizing jQuery to seize events and handle AJAX callbacks

Warning: When VueJs OnMount props is utilized, it might display a message stating, "Expected Object, received Undefined."

Breaking down JavaScript arrays into smaller parts can be referred to

I recently implemented a delete function in my code that successfully removes a row, but now I am looking to also delete the corresponding data from localStorage in JavaScript

What is the best way to eliminate the input range in a React date range picker?

What is the best way to implement a CSS transition for styles that are dynamically created by React?

implementing a JavaScript function and declaring a variable from an HTML source

Applying the jqtransform plugin to all forms except for one

What is the best way to implement a composite primary key in DocumentClient.batchWrite()?

WordPress CSS & JS files failing to enqueue properly

Can you explain the distinction between locating an element by its class name versus locating it by its CSS selector?