JavaScript-da radio tugmalari bilan ishlash

Keling, endi radio tugmalari bilan ishlaymiz. Ular faqat bittasi tanlanishi mumkin bo‘lgan o‘zgartirgichlar guruhini ifodalaydi. Bir nechta radio tugmachalari guruh bo‘lishi uchun, ular bir xil name atributi qiymatiga ega bo‘lishi kerak:

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

JavaScript-da qaysi tugma tanlanganligini aniqlash uchun, har bir radio tugmachiga turli qiymatlarga ega bo‘lgan value atributlari qo‘shiladi:

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

Biror radio tugmasini standart sifatida belgilash uchun, unga checked atributini berish kerak:

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

Keling, amaliyotda JavaScript-da bunday tugmalar bilan qanday ishlashni ko‘rib chiqaylik. Faraz qilaylik, bizda yuqorida keltirilgan radio tugmalari guruhi hamda oddiy tugma mavjud:

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

Keling, tugma bosilganda ekranga joriy vaqtda belgilangan radio tugmachining value qiymati chiqarilsin.

Vazifani hal qilish uchun barcha radio tugmachalarni sikllar bilan aylantirish va qaysi biri tanlanganligini aniqlash kerak. Buning uchun har bir aylanayotgan radio tugmachining checked xususiyati qiymatini o‘qish kerak. Ushbu xususiyat true ga teng bo‘lgan radio tugmacha tanlangan hisoblanadi.

Keling, tavsiflangan amalni amalga oshiramiz:

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 ta radio tugmasi, abzas va tugma berilgan. Tugma bosilganda, belgilangan radio tugmasining value qiymatini abzaga chiqaring.