Коркарди радиотугмаҳо дар JavaScript

Биёед ҳоло бо радиотугмаҳо кор кунем. Онҳо гурӯҳи тагйиркунандаҳоеро ташкил медиҳанд, ки танҳо яке аз онҳо интихоб карда мешавад. Барои он ки чанд радиотугма гурӯҳ бошанд, онҳо бояд арзиши атрибути name-и якхела дошта бошанд:

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

Ва барои он ки дар JavaScript фарқ кунад, кадом тугма интихоб шудааст, ба ҳар як радиотугма дар гурӯҳ атрибутҳои value бо арзишҳои гуногун илова мекунанд:

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

Барои он ки ягон радиотугмаро бо супориши пешфарз нишон диҳанд, ба он атрибути checked лозим аст:

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

Биёед амалан бубинем, чӣ гуна бо ин гуна тугмаҳо дар JavaScript кор кардан мумкин аст. Бигзор мо гурӯҳи радиотугмаҳои дар боло овардашударо дошта бошем, ва инчунин як тугмаи оддӣ:

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

Биёед чунон кунем, ки пахш кардан ба тугма арзиши value-и он радиотугмаеро, ки дар ин лаҳза нишон дода шудааст, ба экран чоп кунад.

Барои ҳалли вазифа зарур аст, ки ҳамаи радиотугмаҳои моро бо давр гузаронем ва муайян кунем, кадом аз онҳо интихоб шудааст. Барои ин нигоҳ доштани арзиши хосият checked аз ҳар як радиотугмаи даврӣ зарур аст. Он ки ин хосият ба true баробар аст - ҳамон радиотугма интихоб шудааст.

Дар амал татбиқ мекунем:

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 радиотугма, абзас ва тугма дода шудаанд. Паҳн кардан ба тугма арзиши value-и радиотугмаи нишондодашударо ба абзас чоп кунед.