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".

Answer 1

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>