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

Closing the modal by simply clicking outside of it's boundaries

Looking to streamline your webpack configuration in vue.config.js? Utilize webpack-chain for efficient setup. And, wondering how to leverage the speed-measure-webpack

yii2: Utilizing the power of dynamic calling in widgets

Having trouble with the functionality of a simple jQuery toggle menu on mobile?

Creating an App on Shopify

Ways to delete a property from an element that was originally included with jquery

Protecting Angular Routes: Verifying HTTP-Only Cookie Authentication on the Server- CanActivate Function

What is the best way to create an array in jQuery based on the presence of set variables?

Having trouble getting the .push() method in JavaScript to function correctly

"Comparing the similarity and accessibility of using the same browser session with a Firefox or Chrome

issues with jasmine angularjs tests exhibiting erratic outcomes

Transferring JSON data using DWR (Direct Web Remoting)

Avoiding node_modules in Webpack 2 with babel-loader

Utilizing an array to pass a series of items to a function parameter

When does JSON overload become a problem?

Exploring the Method of Accessing data-* Attributes in Vue.js

Developing an npm module that is compatible with both web browsers and Node.js

Retrieve the parent node's class using JavaScript without relying on jQuery

Issue: Trouble with ajax form functionality

FullCalendar is encountering loading issues when trying to fetch data from JSON, with the