Handling HTML Checkboxes with Javascript
This tutorial explains how to manipulate HTML checkboxes with Javascript. Most of the operations can be performed through the checked property of the checkbox DOM element.
Checking a Checkbox
To check a checkbox, the checked property of the DOM element can be set to true .
Unchecking a Checkbox
The checked property of the checkbox DOM element can be set to false to uncheck it.
Find whether a Checkbox is Checked or Unchecked
There are two ways in which it can be found whether a checkbox is checked or not :
The value of the checked property of the checkbox DOM element can be read. If true then it is checked, if false then unchecked.
The CSS pseudo-class :checked selector can be used to find whether the checked DOM elements exists or not.
Getting Value of a Checkbox
The value of the checkbox can be found with the value property.
Handling Multiple Checkboxes
Assuming multiple checkboxes can be selected from a group, and we need to get all selected values :
Check If A Checkbox Is Checked With jQuery
How do you check if a checkbox is checked with jQuery? No, it’s not a tongue-twister! Let’s say you’ve got this input:
It’ll be checked by default because of the checked attribute. jQuery allows you to check a DOM element’s attribute through the .attr() method e.g.:
So we can just check the checked attribute and that will tell us?
Not exactly. The checked attribute simply tells you whether the checkbox is checked or not by default when the page is rendered. It does not tell you the current state of the checkbox.
To check the current state of the checkbox you must instead use the checked property. It is dynamically updated as the user checks/unchecks. jQuery allow you to check a property with the .prop() method like so:
We go into much more detail and show a live example in the video below.
JS Dojo: Javascript Tutorials With Real-Time Help
Raise your skill to professional level in a live, interactive coding environment with an industry expert looking over your shoulder.
Get the Value of Checked Checkbox in JavaScript
This article will help you use JavaScript to check if a checkbox is checked, get the values of checked checkboxes, and select/unselect all checkboxes.
Inspecting if a Checkbox Is Checked in JavaScript
There are two states for the checkbox: checked and unchecked.
- To begin, use a DOM technique like getElementById() or querySelector() to choose the checkbox.
- Then, get to the checkbox element’s checked property. The checkbox is checked if its checked property is actual; else, it is not.
The following code shows this with the querySelector() method.
In this example,
First you can create a Html checkbox element.
Second, examine the checked attribute of the checkbox with the id #submit .
The result displayed in the console will be false as the checkbox is unchecked.
If the checkbox is checked, it will display true in the console.
You will see Output as true in the console.
Please enable JavaScript
Getting checkbox Values
A checkbox and a button can be found on the following page. The value of the checkbox will be displayed on the console window when you click the button:
Whether the checkbox is selected or not, you always obtain the on string when you get the value property of a checkbox.
Getting Values of Multiple Selected Checkboxes Using querySelectorAll() in JavaScript
Three checkboxes can be found on the following page. When you pick one or more checkboxes and press the button, the values of the selected checkboxes will be displayed.
Below is how it works.
We make three checkbox elements in HTML with the same name (color) but different values.
- To begin, add the following to the button’s click event handler:
- Second, use the document to select the specified checkboxes. Within the click event handler, use the querySelectorAll() method:
- Third, create an array with the values of the selected checkboxes:
Getting Value of Multiple Selected Chechboxes Using the getElementById() Method in JavaScript
Now you’ll learn how to get all of the user’s checkbox values using getElementById() method . Take a look at the example below.
By running this code, we will obtain a response similar to the one below, where you can select the subjects you are familiar with.
Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.
How to check if Checkbox is Checked or not using JavaScript
In the first example, I am using checkboxes that I have added at design time. The checkboxes are inside a <div> element. Using a simple script, I’ll check if a checkbox is checked or not.
Simple isn’t? What this is doing? First, it will getting all the child elements inside a <div> element and check if any child element is a checkbox . I am running a for loop to check the type of elements that I have inside the <div>.
Next, using the .checked property, I am checking if the checkbox is checked or not.
if (cont[i]. checked )
The property .checked returns a Boolean value (true or false). So, if a checkbox is checked, the property returns true , or else its false.
The same above procedure (or method) can be used to check dynamically created checkboxes.
You can easily create checkboxes dynamically in JavaScript and it to a web page. These checkboxes too need to be checked, in some cases.
Here’s how you can do this.
Now, you can validate your checkboxes easily at the client side using the above methods. However, never forget to validate form data at the server side also. Hope this helps