Werk met radioknoppies in JavaScript

Laat ons nou met radioknoppies werk. Hulle verteenwoordig 'n groep skakelaars waarvan slegs een gekies kan word. Vir verskeie radioknoppies om 'n groep te wees, moet hulle dieselfde waarde vir die attribuut name hê:

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

En om op JavaScript te onderskei watter een knoppie gekies is, word aan elke radioknoppie in die groep 'n value-attribuut met 'n verskillende waarde bygevoeg:

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

Om 'n radioknoppie as standaard gemerk te maak, moet die attribuut checked daaraan toegeken word:

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

Laat ons prakties sien hoe om met sulke knoppies op JavaScript te werk. Kom ons neem aan ons het die bogenoemde groep radioknoppies, en ook 'n gewone knoppie:

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

Laat ons dit so maak dat wanneer die knoppie gedruk word, die value van die radioknoppie wat tans gemerk is, op die skerm vertoon word.

Om die probleem op te los, is dit nodig om al ons radioknoppies met 'n lus deur te gaan en vas te stel watter een gekies is. Om dit te doen, moet die waarde van die checked eienskap van elkeen van die radioknoppies wat deurloop word, gelees word. Die een met hierdie eienskap gelyk aan true - daardie radioknoppie is gekies.

Laat ons die beskrywing implementeer:

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