Darbība ar radio pogām JavaScript

Tagad strādāsim ar radio pogām. Tās ir pārslēgšanas pogu grupa, no kurām var izvēlēties tikai vienu. Lai vairākas radio pogas veidotu grupu, tām jābūt ar tādu pašu atribūta name vērtību:

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

Lai JavaScript varētu atšķirt, kura tieši poga ir izvēlēta, katrai radio pogai grupā tiek pievienoti atribūti value ar dažādām vērtībām:

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

Lai pēc noklusējuma kāda radio poga būtu atzīmēta, tai jāpievieno atribūts checked:

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

Praksē apskatīsim, kā strādāt ar šādām pogām, izmantojot JavaScript. Pieņemsim, ka mums ir iepriekš parādītā radio pogu grupa, kā arī parasta poga:

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

Izveidosim tā, lai, noklikšķinot uz pogas, ekrānā tiktu parādīta value radio pogas, kas šobrīd ir atzīmēta.

Lai atrisinātu uzdevumu, nepieciešams iziet cauri visām mūsu radio pogām ar ciklu un noteikt, kura no tām ir izvēlēta. Lai to izdarītu, ir jānolasa katrai apstaigājamo radio pogu īpašības checked vērtība. Kurai šī īpašība ir vienāda ar true - tā radio poga ir izvēlēta.

Realizēsim aprakstīto:

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

Ir dotas 3 radio pogas, rindkopa un poga. Kad noklikšķina uz pogas, rindkopā jāparāda value atzīmētās radio pogas.