How to set value to checkbox in JavaScript

Want to know how to set value to checkbox in JavaScript dynamically?

By default the value of a checkbox is on. though, we can assign a value to checkbox according to our needs. In this article, I will try to make you understand how you can set value to checkbox in JavaScript.

Set value to checkbox using HTML attribute.

We can assign a custom value to a input type="checkbox" using the value=" " attribute. Example :-

<input type="checkbox" value="custom value">

Assign a value to checkbox in JavaScript dynamically.

To set a custom value to checkbox in js, create a <input type="checkbox"> element. Then inside the script tag, store the checkbox value to a variable. e.g. const x = document.querySelector('input[type="checkbox"]').value;. Then set text or number to the checkbox.

Set custom value to checkbox in Js
function myFunction(){
      const x = document.querySelector('#my-inp').value;
      x ='My Name Is Apu.';
   }
Try it Yourself »
If a checkbox is in checked state when a form is submitted, the name of the checkbox is sent along with the value of the value property (if the checkbox is not checked, no information is sent). See The Demo

Conclusion

In this article, you have learned how to set a custom value to checkbox using javascript.