Trabalhando com botões de rádio em JavaScript

Vamos agora trabalhar com botões de rádio. Eles representam um grupo de interruptores, dos quais apenas um pode ser selecionado. Para que vários botões de rádio formem um grupo, eles devem ter o mesmo valor do atributo name:

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

E para distinguir em JavaScript qual botão foi selecionado, cada botão de rádio no grupo recebe atributos value com valores diferentes:

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

Para tornar algum botão de rádio marcado por padrão, é necessário definir o atributo checked para ele:

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

Vamos ver na prática como trabalhar com esses botões em JavaScript. Suponha que tenhamos o grupo de botões de rádio apresentado acima, e também um botão comum:

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

Vamos fazer com que ao clicar no botão, seja exibido na tela o value do botão de rádio que está marcado no momento.

Para resolver a tarefa, é necessário percorrer todos os nossos botões de rádio com um loop e determinar qual deles está selecionado. Para isso, é preciso ler o valor da propriedade checked de cada um dos botões de rádio percorridos. Aquele cuja propriedade for igual a true - esse botão de rádio está selecionado.

Vamos implementar o 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);
		}
	}
});

Dados 3 botões de rádio, um parágrafo e um botão. Ao clicar no botão, exiba no parágrafo o value do botão de rádio marcado.