How to get and set the value of a JavaScript checkbox

This article explains how to obtain the ON/OFF status of a checkbox using JavaScript. We will also explain how to set the values ​​of radio buttons and checkboxes.

How can I get the value of a checkbox in JavaScript?

You can use the “checked” property to get or set the value.

Obtaining the value of a checkbox using the checked property

Use the checked property　to get the value of an HTML checkbox . The checked property indicates whether the checkbox is in the ON state.

The checked property is a boolean value and returns true if it is ON and false if it is OFF .

If you have an HTML checkbox like the one below, we will show you how to get the value.

<input type="checkbox" id="checkbox1">

Here’s how to get the value using the checked property:

var checkbox = document.getElementById("checkbox1");
var isChecked = checkbox.checked;

if (isChecked) {
  console.log("Checked.");
} else {
  console.log("Unchecked");
}

By using the checked property like this, you can get the value of a checkbox using JavaScript.

How to set the value of a radio button/checkbox

You can use the checked property to set the value of a radio button or checkbox.

Set radio button value

A radio button is a form element that allows you to select only one option from among multiple options. Use the checked property to set the value of a radio button.

For example, by writing the following, the target radio button will be selected.

document.getElementById(“Radio button ID”).checked = true;

In the sample below, the JavaScript radio button “radio1” is set to the checked state.

<input type="radio" id="radio1" name="radio">
<label for="radio1">radio button1</label>

<input type="radio" id="radio2" name="radio">
<label for="radio2">radio button2</label>

<script>
  // Make radio button 1 selected.
  document.getElementById("radio1").checked = true;
</script>

Set checkbox value

A checkbox is a form element that allows you to select multiple items.

Use the checked property to set the value of a checkbox.

For example, by writing the following, the target checkbox will be selected.

document.getElementById(“Checkbox ID”).checked = true;

In the sample below, the checkbox “check1” is set to the checked state using JavaScript.

<input type="checkbox" id="check1">
<label for="check1">Check box 1</label>

<input type="checkbox" id="check2">
<label for="check2">Check box 2</label>

<script>
  // Make checkbox 1 selected
  document.getElementById("check1").checked = true;
</script>

summary

We explained how to obtain the ON/OFF status of a checkbox and how to set the value of a radio button/checkbox.

You can easily get the value of a checkbox using the “checked” property!

It is important to always take user actions into account when using JavaScript to perform operations such as checkboxes. 
It is important to be careful not to cause unintended user interactions.