Práce s přepínači v JavaScriptu

Pojďme si nyní procvičit práci s přepínači. Představují skupinu přepínačů, ze kterých lze vybrat pouze jeden. Aby několik přepínačů tvořilo skupinu, musí mít stejnou hodnotu atributu name:

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

Aby bylo možné v JavaScriptu rozlišit, která konkrétní položka byla vybrána, každému přepínači v skupině se přidají atributy value s různými hodnotami:

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

Chcete-li některý přepínač nastavit jako zaškrtnutý ve výchozím stavu, je nutné mu nastavit 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">

Podívejme se v praxi, jak pracovat s takovými přepínači v JavaScriptu. Předpokládejme, že máme výše uvedenou skupinu přepínačů a také obyčejné tlačítko:

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

Udělejme to tak, aby po kliknutí na tlačítko se na obrazovce zobrazilo value přepínače, který je v daném okamžiku zaškrtnutý.

Pro řešení úlohy je nutné projít všechny naše přepínače cyklem a určit, který z nich je vybrán. K tomu je potřeba číst hodnotu vlastnosti checked každého z procházených přepínačů. Ten, u kterého je tato vlastnost rovna true - ten přepínač je vybrán.

Realizujme výše popsané:

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