Travailler avec les boutons radio en JavaScript

Travaillons maintenant avec les boutons radio. Ils représentent un groupe de commutateurs, dont un seul peut être sélectionné. Pour que plusieurs boutons radio constituent un groupe, ils doivent avoir la même valeur d'attribut name :

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

Et pour distinguer en JavaScript, quel bouton exactement a été sélectionné, on ajoute à chaque bouton radio dans le groupe des attributs value avec des valeurs différentes :

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

Pour qu'un bouton radio soit sélectionné par défaut, il est nécessaire de lui attribuer l'attribut checked :

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

Voyons en pratique comment travailler avec de tels boutons en JavaScript. Supposons que nous ayons le groupe de boutons radio présenté ci-dessus, ainsi qu'un bouton ordinaire :

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

Faisons en sorte qu'un clic sur le bouton affiche à l'écran le value du bouton radio qui est actuellement sélectionné.

Pour résoudre la tâche, il est nécessaire de parcourir tous nos boutons radio avec une boucle et de déterminer lequel est sélectionné. Pour cela, il faut lire la valeur de la propriété checked de chacun des boutons radio parcourus. Celui pour lequel cette propriété est égale à true - ce bouton radio est sélectionné.

Implémentons ce qui est décrit :

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

Soit 3 boutons radio, un paragraphe et un bouton. Lors d'un clic sur le bouton, affichez dans le paragraphe le value du bouton radio sélectionné.