JavaScript-de radio düwmeleri bilen işlemek

Indi bolsa radio düwmeleri bilen işleýäli. Olar, diňe biri saýlap bolýan çalşymlaryň toparlarydyr. Birnäçe radio düwmesiniň topary bolmak üçin, olaryň hemme birmeňzeş at atributy name bolmaly:

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

JavaScript-de, haýsy düwmeniň saýlanyny anyklamak üçin, topardaky her bir radio düwmesine dürli bahaly value atributlary goşulýar:

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

Belli bir radio düwmesini deslapky ýagdaýda belläp goýmak üçin, oňa checked atributy bermek zerur:

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

Geliň, amaly işde JavaScript-da şuňa meňzeş düwmeler bilen nähili işlemelidigine seredeliň. Bizde ýokardaky radio düwme topary, şeýle hem adaty düwme bolsun:

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

Geliň, şeýle edeliň, düwmä basylanynda ekrana şu wagt bellikli bolan radio düwmesiniň value-sy çyksyn.

Mesele çözmek üçin ähli radio düwmelerimizi aýlaw bilen gezip, haýsysynyň saýlanyny kesgitlemek zerur. Bunun üçin geçirilýän radio düwmeleriň hersiniň checked hassaýynyň bahasyny okamaly. Bu hassaýy true deň bolan radio düwmesi saýlanandyr.

Görkezileni amala aşyralyň:

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

3 radio düwmesi, abzas we düwme berlipdir. Düwmä basylanynda abzasa bellikli radio düwmesiniň value bahasyny çykaryň.