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.
Create a radio button
Following is a simple code for creating a group of radio buttons.
Copy CodeTest it Now
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.
Check the radio button is selected or not
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.
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.
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.
Get the value of checked radio button:
Using getElementById ()
Following is the code to get the value of checked radio button using getElementById() method:
Following is the code to get the value of checked radio button using querySelector() method:
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 CodeTest it Now
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
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 CodeTest it Now
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.
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.