How to Correctly Retrieve the Value of a Selected Radio Button in JavaScript?

Retrieving the Value of a Selected Radio Button

When trying to obtain the value of a radio button, you may encounter issues resulting in undefined values returned. Understanding the reasons behind this behavior is crucial to finding a solution. Let's examine the code and suggest a solution.

In the provided code:

function findSelection(field) {
  var test = 'document.theForm.' + field;
  var sizes = test;

You are incorrectly trying to access the form element by converting the string to a variable, which is not how DOM elements are accessed in JavaScript. This will result in undefined.

To resolve this, you should use document.querySelector or document.querySelectorAll to accurately select the form inputs.

Here's an improved version:

const radioButtons = document.querySelectorAll('input[name="genderS"]');
for (let i = 0; i < radioButtons.length; i++) {
  if (radioButtons[i].checked) {
    return radioButtons[i].value;
  }
}

Alternatively, you can use the modern approach:

document.querySelector('input[name="genderS"]:checked').value;

This will correctly return the value of the selected radio button without encountering the undefined issue.

The above is the detailed content of How to Correctly Retrieve the Value of a Selected Radio Button in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!