How to Select Checked Radio Buttons and Get Their Values Using JavaScript

---

Radio buttons are commonly used in forms when you want users to select one option from a predefined set. But how do you access the value of the radio button that a user selects? In this post, we’ll walk you through how to retrieve the value of a checked radio button using JavaScript.

What Are Radio Buttons?

Radio buttons allow users to choose one option from a list. Unlike checkboxes, where users can select multiple options, radio buttons only permit a single choice.

Here’s a basic example of a group of radio buttons in HTML:

<form id="myForm">
  <input type="radio" name="option" value="option1"> Option 1<br>
  <input type="radio" name="option" value="option2"> Option 2<br>
  <input type="radio" name="option" value="option3"> Option 3<br>
</form>

How to Retrieve the Value of a Checked Radio Button

When working with radio buttons in JavaScript, the challenge is determining which radio button is checked and then obtaining its value. This can be done easily by iterating through the group of radio buttons and checking their checked property.

Here’s the JavaScript code that does this:

<script>

  // Function to get the checked radio button and its value
  function getCheckedRadioValue(elementName) {
    var radios = document.getElementsByName(elementName);  

// Get all radio buttons with the name 'option'
    var selectedValue = null;

    // Loop through the radio buttons to find the checked one
    for (var i = 0; i < radios.length; i++) {
      if (radios[i].checked) {  // If this radio button is checked
        selectedValue = radios[i].value;  // Store its value
        break;  // Stop once we've found the checked radio button
      }
    }

    // Output the selected value
    if (selectedValue) {
      console.log("Selected radio button value: " + selectedValue);
    } else {
      console.log("No radio button is selected.");
    }
  }

  // Example usage - You can call this function whenever you need the selected value by passing an element name. 
  getCheckedRadioValue(elementName);  
</script>

Step-by-Step Breakdown

Let’s break down how this code works:

1. Get the Radio Buttons: The document.getElementsByName(elementName) method grabs all the radio buttons in the form that share the same name, For example, let’s say you have name assigned to all radio buttons as option then you call this function as document.getElementsByName(“option”).
2. Loop Through the Radio Buttons: A for loop is used to check each radio button. We use the checked property to determine if the button is selected.
3. Store the Value: Once we find the checked button, its value is stored in the selectedValue variable.
4. Display or Use the Value: If a button is selected, the value will be logged in the console. You can replace this part with code to display the value on the page, use it in calculations, or send it as part of a form submission.

Real-World Example: Form Submission

Here’s how you can use this function in a real-world scenario like form submission. For example, you might want to retrieve the selected radio button value when a user submits a form:

<form id="myForm" onsubmit="submitForm(event)">
  <input type="radio" name="option" value="option1"> Option 1<br>
  <input type="radio" name="option" value="option2"> Option 2<br>
  <input type="radio" name="option" value="option3"> Option 3<br>
  <button type="submit">Submit</button>
</form>

<script>
  function submitForm(event) {
    event.preventDefault();  // Prevent the form from submitting

    var radios = document.getElementsByName("option");
    var selectedValue = null;

    for (var i = 0; i < radios.length; i++) {
      if (radios[i].checked) {
        selectedValue = radios[i].value;
        break;
      }
    }

    if (selectedValue) {
      alert("You selected: " + selectedValue);  // Show the selected value in an alert
    } else {
      alert("No option selected!");
    }
  }
</script>

Conclusion

Using JavaScript to select checked radio buttons and get their values is an essential skill for web developers working with forms. Whether you’re building a survey, quiz, or any form that requires single-option selections, knowing how to access the selected radio button is key to handling user input.

With this technique, you can easily integrate radio buttons into your forms and ensure a smooth user experience.

Have Questions?

If you found this tutorial helpful or have any questions, feel free to leave a comment below or reach out to us directly. Stay tuned for more tips and tricks on JavaScript and web development!