Arbejde med radioknapper i JavaScript

Lad os nu arbejde med radioknapper. De repræsenterer en gruppe af afkrydsningsfelter, hvoraf kun én kan vælges. For at flere radioknapper skal være en gruppe, skal de have samme værdi i attributten name:

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

Og for at kunne skelne i JavaScript, hvilken præcis knap der blev valgt, tilføjes hver radioknap i gruppen attributterne value med forskellige værdier:

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

For at gøre en radioknap markeret som standard, skal den have attributten checked:

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

Lad os se i praksis, hvordan man arbejder med sådanne knapper i JavaScript. Lad os sige, at vi har gruppen af radioknapper vist ovenfor, samt en almindelig knap:

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

Lad os gøre det sådan, at når der klikkes på knappen, vil value fra den radioknap, der er markeret i øjeblikket, blive vist på skærmen.

For at løse opgaven er det nødvendigt at gennemgå alle vores radioknapper med en løkke og finde ud af, hvilken af dem der er valgt. For at gøre dette skal man læse værdien af egenskaben checked for hver af de gennemgåede radioknapper. Den, hvor denne egenskab er lig med true - det er den radioknap, der er valgt.

Lad os implementere det beskrevne:

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

Der er givet 3 radioknapper, et afsnit og en knap. Ved klik på knappen skal value fra den markerede radioknap udskrives i afsnittet.