Как получить значение radio js

Иногда нам может потребоваться получить значение выбранного переключателя в нашем веб-приложении. Рассмотрим пример.

<div id="fruits">
  <input type="radio" name="fruit" value="apple">Apple
  <input type="radio" name="fruit" value="orange">Orange
  <input type="radio" name="fruit" value="grape" checked="checked">Grape
</div>
<button onclick="viewRadio();">Показать значение</button>

Напишем функционал, который выберет все радио-кнопки на странице и выведет значение только той, у которой атрибут есть checked.

const viewRadio = () => {
  const fruits = document.querySelectorAll('input[name="fruit"]');
  for (const f of fruits) {
    if (f.checked) {
      alert(f.value)
    }
  }
}