Arbeid med radioknapper i JavaScript

La oss nå arbeide med radioknapper. De representerer en gruppe av brytere, hvorav bare én kan velges. For at flere radioknapper skal være en gruppe, må de ha samme verdi for attributtet name:

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

Og for å kunne skille på JavaScript, hvilken knapp som ble valgt, tilføyes hver radioknapp i gruppen value-attributter med forskjellig verdi:

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

For å gjøre en radioknapp valgt som standard, må den gis attributtet checked:

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

La oss se i praksis hvordan man arbeider med slike knapper i JavaScript. La oss si at vi har radioknappgruppen presentert over, og også en vanlig knapp:

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

La oss gjøre slik at ved klikk på knappen vises value til den radioknappen som er merket i øyeblikket.

For å løse oppgaven er det nødvendig å gå gjennom alle våre radioknapper med en løkke og finne ut hvilken av dem som er valgt. For dette må man lese verdien av egenskapen checked for hver av de gjennomgåtte radioknappene. Den som har denne egenskapen lik true - den radioknappen er valgt.

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

Det er gitt 3 radioknapper, et avsnitt og en knapp. Ved klikk på knappen, skriv ut value til den merkede radioknappen i avsnittet.