Rad sa radio dugmadima u JavaScript

Hajde sada da poradimo sa radio dugmadima. Ona predstavljaju grupu prekidača, od kojih se može izabrati samo jedan. Da bi više radio dugmadi bila grupa, moraju imati istu vrednost atributa name:

html<input type="radio" name="elem">
<input type="radio" name="elem">
<input type="radio" name="elem">

A da bi se na JavaScript razlikovalo koje je tačno dugme izabrano, svakom radio dugmetu u grupi se dodaju atributi value sa različitim vrednostima:

html<input type="radio" name="elem" value="1">
<input type="radio" name="elem" value="2">
<input type="radio" name="elem" value="3">

Da bi neko radio dugme bilo označeno podrazumevano, potrebno mu je zadati atribut checked:

html<input type="radio" name="elem" value="1" checked>
<input type="radio" name="elem" value="2">
<input type="radio" name="elem" value="3">

Hajde da na praksi vidimo kako se radi sa ovakvim dugmadima u JavaScript. Neka kod nas postoji gore prikazana grupa radio dugmadi, kao i obično dugme:

html<input type="submit" id="button">

Hajde da napravimo da se pritiskom na dugme na ekran ispiše value onog radio dugmeta koje je trenutno označeno.

Za rešavanje zadatka potrebno je proći kroz sva naša radio dugmad petljom i utvrditi koje od njih je izabrano. Za to treba pročitati vrednost svojstva checked svakog od prolaznih radio dugmadi. Ono kod koga je ovo svojstvo jednako true - to radio dugme je i izabrano.

Realizujmo opisano:

javascriptlet radios = document.querySelectorAll('input[type="radio"]');
let button = document.querySelector('#button');

button.addEventListener('click', function() {
  for (let radio of radios) {
    if (radio.checked) {
      console.log(radio.value);
    }
  }
});