JavaScript'te Radyo Düğmeleri ile Çalışma

Şimdi radyo düğmeleri ile çalışalım. Bunlar, içinden yalnızca birinin seçilebildiği bir grup anahtar niteliğindedir. Birkaç radyo düğmesinin bir grup oluşturması için, aynı name öznitelik değerine sahip olmaları gerekir:

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

JavaScript üzerinde hangi düğmenin seçildiğini ayırt edebilmek için, gruptaki her bir radyo düğmesine farklı değerlere sahip value öznitelikleri eklenir:

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

Varsayılan olarak herhangi bir radyo düğmesinin işaretli olmasını sağlamak için, ona checked özniteliği verilmelidir:

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

Uygulamada, bu tür düğmelerle JavaScript üzerinde nasıl çalışılacağını görelim. Yukarıda sunulan radyo düğmeleri grubumuzun ve ayrıca normal bir düğmemizin olduğunu varsayalım:

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

Düğmeye tıklandığında, o anda işaretli olan radyo düğmesinin value değerinin ekrana yazdırılmasını sağlayalım.

Görevi çözmek için tüm radyo düğmelerimizin bir döngü ile taranması ve hangisinin seçili olduğunun belirlenmesi gerekir. Bunun için, taranan her bir radyo düğmesinin checked özelliğinin değeri okunmalıdır. Bu özelliği true olan radyo düğmesi seçili olanıdır.

Açıklananları uygulayalım:

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 radyo düğmesi, bir paragraf ve bir düğme verilmiştir. Düğmeye tıklandığında, işaretli radyo düğmesinin value değerini paragrafa yazdırın.