Работа со радио копчиња во JavaScript

Ајде сега да работиме со радио копчињата. Тие претставуваат група на прекинувачи, од кои може да биде избран само еден. За да може неколку радио копчиња да бидат група, тие мора да имаат иста вредност на атрибутот name:

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

А за да се разликува во JavaScript, кое точно копче е избрано, на секое радио копче во групата се додаваат атрибути value со различна вредност:

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

За да се направи некое радио копче обележано по стандард, на него мора да му се зададе атрибутот checked:

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

Ајде да видиме во пракса, како се работи со вакви копчиња во JavaScript. Нека имаме претставената погоре група на радио копчиња, како и обично копче:

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

Ајде да направиме така што при клик на копчето на екранот да се испечати value на онаво радио копче кое е обележано во даден момент.

За решавање на задачата неопходно е да се изминат сите наши радио копчиња со циклус и да се определи кое од нив е избрано. За ова треба да се чита вредноста на својството checked на секое од изминатите радио копчиња. Кај кое ова својство е еднакво на true - тоа радио копче е избрано.

Да го имплементираме опишаното:

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);
    }
  }
});