Is there a JavaScript function that determines which radio input is checked and alerts with the value of that radio input?

Question

In theory I could use a for loop to loop over the various radio inputs to see which is checked and then alert the value of the checked radio input but the function only works when the first radio input is selected.

My final objective is to build a quote form for a client but I've stumbled at the first hurdle. The use of 'alert' was the only attempt that saw any result (I tried console.log, console.dir etc., I've worked for hours with the chrome console/debugger to no avail. If I had a radio with a default check (checked="checked") it would also fail unless it was the first radio input which I selected). Even the JS below is a scrape from a previous (not duplicate) problem I found on StackOverflow where the OP claimed it worked.

const radioButtonValue = radioName => {
      var radioButtons = document.getElementsByName(radioName);
      for (var i = 0; i < radioButtons.length; i++) {
        if (radioButtons[i].checked) {
          return radioButtons[i].value;
        } else {
          return "no value";
        }
      }
    };

    const getValues = () => {
      var distance = radioButtonValue("distanceInput");
      alert(distance);
    };

<form>
      <input name="distanceInput" type="radio" value="d1" />0-9km
      <input name="distanceInput" type="radio" value="d2" />10-19km
      <input name="distanceInput" type="radio" value="d3" />20-29km
      <input name="distanceInput" type="radio" value="d4" />30-39km
      <input name="distanceInput" type="radio" value="d5" />40-49km
      <input name="distanceInput" type="radio" value="d6" />50-59km
      <input name="distanceInput" type="radio" value="d7" />60-69km
      <input name="distanceInput" type="radio" value="d8" />70-79km
      <input name="distanceInput" type="radio" value="d9" />80-89km
    </form>
   <button onclick="getValues()">Get</button>

when I click the first radio input and call getValues(); I'm alerted of the value "d1", but when I click any other I see "no value".

`return "no value";` .... think about that: you exit the loop immediately when the *first* item is not selected. ... Do you see your error? — trincot, Jan 31 '19 at 19:07

FZs · Answer 1 · 2019-01-31T19:27:53.727

Your function returns after the first check, use this format instead:

const radioButtonValue = radioName => {
      var radioButtons = document.getElementsByName(radioName);
      var output="no value"
      for (var i = 0; i < radioButtons.length; i++) {
        if (radioButtons[i].checked) {
          output=radioButtons[i].value;
          break
          }
      }
      return output
    };
    

    const getValues = () => {
      var distance = radioButtonValue("distanceInput");
      alert(distance);
    };

<form>
      <input name="distanceInput" type="radio" value="d1" />0-9km
      <input name="distanceInput" type="radio" value="d2" />10-19km
      <input name="distanceInput" type="radio" value="d3" />20-29km
      <input name="distanceInput" type="radio" value="d4" />30-39km
      <input name="distanceInput" type="radio" value="d5" />40-49km
      <input name="distanceInput" type="radio" value="d6" />50-59km
      <input name="distanceInput" type="radio" value="d7" />60-69km
      <input name="distanceInput" type="radio" value="d8" />70-79km
      <input name="distanceInput" type="radio" value="d9" />80-89km
    </form>
   <button onclick="getValues()">Get</button>

Or without loop:

const radioButtonValue = radioName => {
      var radioButton = document.querySelector("input[name="+radioName+"]:checked");
      return radioButton?radioButton.value:"no value"
    };
    

    const getValues = () => {
      var distance = radioButtonValue("distanceInput");
      alert(distance);
    };

<form>
      <input name="distanceInput" type="radio" value="d1" />0-9km
      <input name="distanceInput" type="radio" value="d2" />10-19km
      <input name="distanceInput" type="radio" value="d3" />20-29km
      <input name="distanceInput" type="radio" value="d4" />30-39km
      <input name="distanceInput" type="radio" value="d5" />40-49km
      <input name="distanceInput" type="radio" value="d6" />50-59km
      <input name="distanceInput" type="radio" value="d7" />60-69km
      <input name="distanceInput" type="radio" value="d8" />70-79km
      <input name="distanceInput" type="radio" value="d9" />80-89km
    </form>
   <button onclick="getValues()">Get</button>

score 0 · Accepted Answer · answered Jan 31 '19 at 19:24

This is much simpler than this. No loops or if/then needed. Just use .querySelector() to isolate the checked radio button.

document.querySelector("button").addEventListener("click", function(){
  // Get the checked radio button
  let selected = document.querySelector("form input[name='distanceInput']:checked");

  console.log(selected.value);
});

<form>
  <input name="distanceInput" type="radio" value="d1" />0-9km
  <input name="distanceInput" type="radio" value="d2" />10-19km
  <input name="distanceInput" type="radio" value="d3" />20-29km
  <input name="distanceInput" type="radio" value="d4" />30-39km
  <input name="distanceInput" type="radio" value="d5" />40-49km
  <input name="distanceInput" type="radio" value="d6" />50-59km
  <input name="distanceInput" type="radio" value="d7" />60-69km
  <input name="distanceInput" type="radio" value="d8" />70-79km
  <input name="distanceInput" type="radio" value="d9" />80-89km

<button type="button">Get selected radio button value</button>
</form>

score 0 · Answer 3 · answered Jan 31 '19 at 19:25

Yes, there is such a function. When you access the name on the elements collection of the form element, for radiobuttons you get back a special RadioNodeList that has a value property.

In your case:

document.querySelector("form").elements["distanceInput"].value;

score 0 · Answer 4 · answered Jan 31 '19 at 19:25

One easy way to do it is to give your radio buttons a class and use the following query selector .<className>:checked

Example

document.getElementById('btn').onclick = (e) => {
  const val = document.querySelector('.radio:checked').value;
  console.log(val);
};

<form>
  <input type="radio" name="test" class="radio" value="One" />
  <input type="radio" name="test" class="radio" value="Two" />
  <input type="radio" name="test" class="radio" value="Three" />
</form>
<button id="btn">Get Value</button>

Is there a JavaScript function that determines which radio input is checked and alerts with the value of that radio input?

4 Answers4