How to check a radio button using JavaScript?

A radio button is an icon that is used in forms to take input from the user. It allows the users to choose one value from the group of radio buttons. Radio buttons are basically used for the single selection from multiple ones, which is mostly used in GUI forms.

You can mark/check only one radio button between two or more radio buttons. In this chapter, we will guide you on how to check a radio button using the JavaScript programming language.

For this, first we design a form containing radio buttons using HTML, and then we will use JavaScript programming to check the radio button. We will also check which radio button value is selected.

Create a radio button

Following is a simple code for creating a group of radio buttons.

Copy Code

Check a radio button

We do not need to write any specific code to check the radio button. They can be checked once they are created or specified in HTML form.

However, we have to write the JavaScript code to get the value of the checked radio button, which we will see in the chapter below:

Check the radio button is selected or not

There are two ways in JavaScript to check the marked radio button or to identify which radio button is selected. JavaScript offers two DOM methods for this.

• getElementById
• querySelector

The input radio checked property is used to check whether the checkbox is selected or not. Use document.getElementById('id').checked method for this. It will return the checked status of the radio button as a Boolean value. It can be either true or false.

True - If radio button is selected.

False - If radio button is not selected/ checked.

See the JavaScript code below to know how it works:

Example

For example, we have a radio button named Summer and id = 'summer'. Now, we will check using this button id that the radio button is marked or not.

Copy Code

querySelector()

The querySelector() function is a DOM method of JavaScript. It uses the common name property of radio buttons inside it. This method is used as given below to check which radio button is selected.

Example

For example, we have a group of radio buttons having the name property name = 'season' for all buttons. Now, between these buttons named season we will check which one is selected.

Copy Code

Get the value of checked radio button:

Using getElementById ()

Following is the code to get the value of checked radio button using getElementById() method:

Copy Code

Using querySelector()

Following is the code to get the value of checked radio button using querySelector() method:

Copy Code

Full code to get selected radio button value

In this example, we will put all the above code together to create and check a radio button. After that we will also fetch the value of the selected radio button.

Copy Code

Output

When you will execute the above code, it will run on the web and give the output as given below:

Choose one of the radio buttons and click on the Submit button and get the selected value.

In case you do not choose any of the seasons and directly click on the Submit button, it will show you an error message that - You have not selected any season because we have used the validation.

Get the value of selected radio button: querySelector()

DOM querySelector() method

The querySelector() function is a DOM method of JavaScript. This method is used to get the element that matches with the specified CSS selector in the document. Remember you need to specify the name property of the radio button in HTML code.

It is used as document.querySelector('input[name="JTP"]:checked') inside the <script> tab to check the selected radio button value from the group of radio buttons. It minimizes the length of the code by getting the value of the selected radio button using a small line of code.

See the code below how it will use with HTML form:

Copy Code

Output

When you will execute the above code, it will show you the output on the web as given below. From here, choose your favourite season.

When you choose a value between the given radio button and click on the Submit button, you will get the selected value on the web.

In case you click on the Submit button without choosing any of the radio button, it will show you an error message that - You have not selected any season.

So, here you can see that both getElementById('season').value and document.querySelector('input[name="JTP"]:checked') work same. Both are used to find the checked radio button value. You can use any of them.

getElementById vs querySelector

Both DOM methods getElementByID() and querySelector() works almost the same. However, they also have few differences like performance and size of code, etc. Let's see some difference between them:

Length of code

The code written with getElementById is a bit longer than the querySelector. Using the getElementById method, we need to check each radio button individually which one is checked.

On the other side, if you use the querySelector DOM method, you just have to put a single line of code to check the marked radio button and get its value. So, the conclusion is that querySelector requires less code.

Performance

Both functions provide good performance but all you need to know which one is better. The getElementById method is much faster than the querySelector method. The querySelector method is a bit complex, as well.

Value used by DOM methods

The getElementById method always uses a unique id of each radio button while checking the marked button and returns the first element matches with the id.

Whereas querySelector uses a common name (selector) for all radio buttons to get the marked radio button and returns the first element that matches with the specified selector.