If you are building interactive web forms, knowing how to get value from radio button in javascript is an essential skill for every front-end developer. Which means radio buttons allow users to select one option from a predefined group, and JavaScript gives you the power to read that selection instantly, validate it, or trigger actions based on the user’s choice. Whether you are creating a simple survey, a pricing plan selector, or a multi-step quiz, understanding how to retrieve the selected radio button value helps you build responsive interfaces that feel intuitive and professional.
The official docs gloss over this. That's a mistake.
What Are Radio Buttons and Why Use JavaScript?
Radio buttons are HTML input elements defined with type="radio". Unlike checkboxes, which allow multiple selections, radio buttons are designed for mutually exclusive choices. All radio buttons that share the same name attribute belong to the same group, meaning only one option in that group can be selected at a time.
HTML alone can display radio buttons and submit their values to a server, but it cannot react to user input in real time. That is where JavaScript comes in. With JavaScript, you can:
- Detect which option is selected without refreshing the page.
- Validate forms before submission to ensure a choice has been made.
- Update the user interface dynamically based on the selected value.
- Send data to APIs or update other page elements immediately.
Because radio buttons are grouped by name rather than by ID, retrieving the correct value requires targeting the right group and checking which element has the checked property set to true.
How to Get Value from Radio Button in JavaScript
There are several reliable approaches to get value from radio button in javascript, depending on your project structure and browser support requirements.
Using document.querySelector with :checked
The most modern and concise method is to use document.querySelector() with a CSS selector that targets the checked radio button within a specific group No workaround needed..
const selected = document.querySelector('input[name="subscription"]:checked');
if (selected) {
console.log(selected.value);
} else {
console.
In this example, the selector looks for an `input` element with the name `subscription` that is also checked. If a match exists, the `value` property holds the data you need. If no radio button is selected, `querySelector` returns `null`, so you should always check for that condition before accessing `.value`.
### Looping Through Radio Button Groups
If you need to support older browsers or want more control over the selection process, you can gather all radio buttons in a group and loop through them to find the checked one.
```javascript
const radios = document.getElementsByName("paymentMethod");
let selectedValue = null;
for (let i = 0; i < radios.Think about it: length; i++) {
if (radios[i]. checked) {
selectedValue = radios[i].
console.log(selectedValue);
This method returns an HTMLCollection of all elements sharing the same name. Plus, by checking the checked property of each element, you can identify the active selection. This approach is explicit and easy to debug, especially when you need to know the index of the selected option.
Counterintuitive, but true.
Accessing Radio Buttons Through a Form
When your radio buttons are wrapped inside a <form> element, you can access them through the form’s elements collection. This is useful when you are already handling form submission.
const form = document.getElementById("myForm");
const selected = form.elements["plan"].value;
If no radio button is selected, this may return an
