Puna me butonat e radios në JavaScript

Le të punojmë tani me butonat e radios. Ato përfaqësojnë një grup çelësash, nga të cilët mund të zgjidhet vetëm një. Që disa butona radio të formojnë një grup, ato duhet të kenë të njëjtën vlerë të atributit name:

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

Dhe për të dalluar në JavaScript, cila buton është zgjedhur, secilit buton radio në grup i shtohen atributet value me vlera të ndryshme:

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

Për të bërë një buton radio të zgjedhur si parazgjedhje, atij duhet t'i caktohet atributi checked:

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

Le të shohim në praktikë, si të punohet me butona të tillë në JavaScript. Le të themi se kemi grupin e butonave të radios të paraqitur më lart, dhe gjithashtu një buton të zakonshëm:

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

Le të bëjmë që me klikim në buton të shfaqet në ekran value i atij butoni radio, i cili është zgjedhur në atë moment.

Për zgjidhjen e detyrës është e nevojshme të kalojmë nëpër të gjithë butonat tanë radio me një cikël dhe të përcaktojmë, cili nga ata është zgjedhur. Për këtë duhet të lexohet vlera e vetisë checked e secilit prej butonave të radios që përsëriten. Ai buton, vetia e të cilit është e barabartë me true - ai buton radio është zgjedhur.

Le të implementojmë sa më sipër:

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

Janë dhënë 3 butona radio, një paragraf dhe një buton. Me klikim në buton shfaqeni në paragraf value e butonit të radios të zgjedhur.