Arbeit mit Radio-Buttons in JavaScript

Lassen Sie uns nun mit Radio-Buttons arbeiten. Sie stellen eine Gruppe von Schaltern dar, von denen nur einer ausgewählt werden kann. Damit mehrere Radio-Buttons eine Gruppe bilden, müssen sie den gleichen Wert für das Attribut name haben:

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

Um in JavaScript unterscheiden zu können, welcher Button genau ausgewählt wurde, erhält jeder Radio-Button in der Gruppe Attribute value mit unterschiedlichen Werten:

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

Um einen Radio-Button standardmäßig als ausgewählt zu markieren, muss ihm das Attribut checked zugewiesen werden:

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

Lassen Sie uns in der Praxis sehen, wie man mit solchen Buttons in JavaScript arbeitet. Angenommen, wir haben die oben dargestellte Gruppe von Radio-Buttons sowie einen normalen Button:

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

Lassen Sie uns Folgendes umsetzen: Beim Klick auf den Button soll der value desjenigen Radio-Buttons, der aktuell ausgewählt ist, auf dem Bildschirm ausgegeben werden.

Um die Aufgabe zu lösen, müssen alle Radio-Buttons in einer Schleife durchlaufen und bestimmt werden, welcher von ihnen ausgewählt ist. Dazu muss der Wert der Eigenschaft checked jedes durchlaufenen Radio-Buttons ausgelesen werden. Derjenige, bei dem diese Eigenschaft true entspricht - dieser Radio-Button ist ausgewählt.

Setzen wir das Beschriebene um:

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