(Vanilla) JS: Checkbox "checked" returning unexpected results

Using the pen below you can see there are two elements, a button and a checkbox input.

When the button is clicked I would like to determine the status of checkbox (clicked/not-clicked).

Regardless of the visual check mark presence or not, the console always logs false. Why is this?

https://codepen.io/sterlingbutters/pen/ZEGGgvm

EDIT (code):

HTML:

<input id='stall' type="checkbox">

<button id='button'>Test

JS:

var stall = document.getElementById('stall').checked;
var button = document.getElementById('button');
button.onclick = function () {
  console.log(stall);
}

You have to reasign stall on button click. So Using

button.onclick = function () {
  var stall = document.getElementById('stall').checked
  console.log(stall);
}

It works fine.

How to uncheck a checkbox in pure JavaScript?, <html> <body> <input id="check1" type="checkbox" checked="" name=" copyNewAddrToBilling"> </body> <script language="javascript">� document.getElementById('checkbox').click(); However, this toggles the checked status of the checkbox, instead of specifically setting it to true or false. Remember that the change event should only fire, when the checked attribute actually changes.

Try this instead: assign the element to the variable, and then inside your onclick function you get the checked property every time it runs.

If you just store the boolean value of checked in a variable, it will never update. Primitive types like booleans are always stored as simple values, not as auto-updating references back to the original property.

var stall = document.getElementById('stall');
var button = document.getElementById('button');
button.onclick = function () {
  console.log(stall.checked);
}
<input id='stall' type="checkbox">

<button id='button'>Test

Check/Uncheck checkbox with JavaScript (jQuery or vanilla , Javascript: // Check document.getElementById("checkbox").checked = true; // Uncheck document.getElementById("checkbox").checked = false;. jQuery (1.6+): The JavaScript function above looks at the “checked” property of the DOM element that represents the checkbox that has been clicked on. If the property is set to TRUE, it means that the checkbox has been ticked. Similarly, if it is FALSE, then it means that the checkbox is NOT ticked. Detect checkbox change with JQuery.

Once you assigned "stall", it won't be re-assiged in "button.onclick". You must re-assign, such as

var button = document.getElementById('button');
button.onclick = function () {
  var stall = document.getElementById('stall').checked;
  console.log(stall);
}

or better

var stall = document.getElementById('stall');
var button = document.getElementById('button');
button.onclick = function () {
  console.log(stall.checked);
}

Vanilla-JS > Check a checkbox - JSFiddle, <input type="checkbox" name="coco" />. 3. </form>. 4. <button id="bou">Check</ button>. 5. . JavaScript + jQuery 1.8.3 Tidy. xxxxxxxxxx. 4. 1. document. Okay, now that I have the checkbox rendering, I can add a change event handler to all of the checkboxes. Here are my user stories: If all of the boxes are unchecked, the box will display as unchecked, and when a user checks it, it and all other boxes will get checked.

Creating a Vanilla Javascript Select All/None Checkbox, createElement('span') // set element properties input.id = `option-${i}` input.type = 'checkbox' span.textContent = option label� The checkbox object allows you to create checkboxes within your HTML forms. Checkboxes allow the user to select one or more options from a limited number of choices. The checkbox allows you to search for elements within the checkbox as elements of an array.

JavaScript: Detect when checkbox is ticked / unticked., Detecting checkbox changes without JQuery. Let's start off by looking at a vanilla JavaScript example. Our HTML checkbox:. Checkboxes Group in JavaScript. In this part of the tutorial, I am going to show you how you can work on checkboxes group in JavaScript. In the demo, you can select, and unselect any products from the beauty products list using the HTML checkboxes.

JavaScript Checkbox, Summary: in this tutorial, you will learn how to use JavaScript to check if a checkbox is checked, to get values of selected checkboxes, and select / unselect all� HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8 Exercises HTML Exercises CSS Exercises JavaScript Exercises SQL Exercises PHP Exercises Python Exercises jQuery Exercises Bootstrap Exercises Java Exercises C++ Exercises C# Exercises

Comments
  • You have to re-asign the value of stall when you click the button. Otherwise it will stay the initial value of the checkbox state during runtime
  • As Tracer69 said, you stored the value once outside the function when it was false.
  • Ahh yes this works - thank you for the speedy answer - I still can't accept it for another 8 minutes