JavaScript-də Radio Düymələri ilə İşləmək

Gəlin indi radio düymələri ilə işləyək. Onlar təmsil edir bir qrup keçid düymələrini, onlardan yalnız biri seçilə bilər. Bir neçə radio düyməsinin qrup olması üçün, onlar eyni atribut dəyərinə malik olmalıdırlar name:

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

Və JavaScript-də hansının xüsusilə düymənin seçildiyini fərqləndirmək üçün, hər bir radio düyməsinə qrupda müxtəlif dəyərlərlə value atributları əlavə edirlər:

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

Hər hansı bir radio düyməsini defolt olaraq seçilmiş etmək üçün, ona checked atributunu təyin etmək lazımdır:

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

Gəlin praktikada baxaq, necə işləmək belə düymələrlə JavaScript-də. Qoy bizdə yuxarıda təqdim olunan radio düymələri qrupu olsun, həmçinin adi bir düymə:

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

Gəlin edək ki, düyməyə kliklənəndə ekrana çıxsın value o radio düyməsinin, hansı ki, hazırkı anda seçilib.

Tapşırığın həlli üçün zəruridir bütün radio düymələrimizi tsikllə seçmək və müəyyən etmək, hansının onlardan seçildiyini. Bunun üçün lazımdır oxumaq checked xassəsinin dəyərini hər birindən seçilən radio düymələrinin. Hansının ki, bu xassə bərabərdir true - o radio düyməsi və seçilib.

Təsvir olunanı həyata keçirək:

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

Verilib 3 radio düyməsi, abzas və düymə. Düyməyə kliklənəndə abzasa çıxar value seçilmiş radio düyməsinin.