Werken met radioknoppen in JavaScript

Laten we nu werken met radioknoppen. Ze vormen een groep schakelaars, waarvan er slechts één geselecteerd kan zijn. Om meerdere radioknoppen een groep te laten vormen, moeten ze dezelfde waarde voor het attribuut name hebben:

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

En om in JavaScript te kunnen onderscheiden welke knop precies was geselecteerd, krijgt elke radioknop in de groep value-attributen met verschillende waarden:

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

Om een radioknop standaard geselecteerd te maken, moet je er het attribuut checked aan toevoegen:

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

Laten we in de praktijk bekijken hoe we met zulke knoppen kunnen werken in JavaScript. Stel dat we de bovenstaande groep radioknoppen hebben, en ook een gewone knop:

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

Laten we ervoor zorgen dat er bij een klik op de knop het value van de radioknop die op dat moment is geselecteerd, op het scherm wordt weergegeven.

Om de taak op te lossen moet je alle radioknoppen doorlopen met een loop en bepalen welke ervan is geselecteerd. Daarvoor moet je de waarde van de eigenschap checked van elke doorgelopen radioknop uitlezen. Bij welke deze eigenschap gelijk is aan true - die radioknop is geselecteerd.

Laten we het beschrevene implementeren:

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

Er zijn 3 radioknoppen, een alinea en een knop. Bij een klik op de knop moet je in de alinea het value van de geselecteerde radioknop weergeven.