Trabajo con botones de radio en JavaScript

Ahora trabajemos con botones de radio. Representan un grupo de interruptores, de los cuales solo se puede seleccionar uno. Para que varios botones de radio formen un grupo, deben tener el mismo valor en el atributo name:

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

Y para distinguir en JavaScript, cuál exactamente botón fue seleccionado, a cada botón de radio en el grupo se le añaden atributos value con valores diferentes:

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

Para hacer que algún botón de radio esté marcado por defecto, es necesario asignarle el atributo checked:

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

Veamos en la práctica, cómo trabajar con tales botones en JavaScript. Supongamos que tenemos el grupo de botones de radio presentado arriba, y también un botón normal:

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

Hagamos que al hacer clic en el botón se muestre en pantalla el value del botón de radio que está marcado en ese momento.

Para resolver la tarea es necesario recorrer todos nuestros botones de radio con un ciclo y determinar, cuál de ellos está seleccionado. Para esto hay que leer el valor de la propiedad checked de cada uno de los botones de radio recorridos. Aquel cuya propiedad es igual a true - ese botón de radio es el seleccionado.

Implementemos lo descrito:

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

Se dan 3 botones de radio, un párrafo y un botón. Al hacer clic en el botón, muestre en el párrafo el value del botón de radio marcado.