Arbete med radioknappar i JavaScript

Låt oss nu arbeta med radioknappar. De representerar en grupp av alternativknappar, varav endast en kan vara vald. För att flera radioknappar ska tillhöra samma grupp, måste de ha samma värde på attributet name:

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

För att kunna särskilja i JavaScript vilken knapp som valts, tilldelas varje radioknapp i gruppen attributet value med olika värden:

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

För att göra en radioknapp förvald (markerad) som standard, måste den tilldelas attributet checked:

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

Låt oss i praktiken se hur man arbetar med sådana knappar i JavaScript. Antag att vi har ovanstående grupp av radioknappar, samt en vanlig knapp:

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

Låt oss göra så att när knappen klickas visas value för den radioknapp som för närvarande är markerad.

För att lösa uppgiften måste vi gå igenom alla våra radioknappar med en loop och avgöra vilken som är vald. Detta görs genom att läsa värdet på egenskapen checked för var och en av radioknapparna. Den för vilken denna egenskap är true - det är den radioknappen som är vald.

Låt oss implementera det beskrivna:

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 finns 3 radioknappar, ett stycke och en knapp. Vid klick på knappen, skriv value för den markerade radioknappen till stycket.