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 ගුණාංගය 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 සලකුණු කරන ලද රේඩියෝ බොත්තමේ අගය පෙන්වන්න.