Kufanya Kazi na Vitufe vya Redio katika JavaScript

Hebu sasa tufanye kazi na vitufe vya redio. Huwakilisha kikundi cha vibadilishaji, ambavyo ni kimoja tu kinaweza kuchaguliwa. Ili vitufe vya redio kadhaa viwe kikundi, lazima viwe na thamani sawa ya sifa name:

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

Na ili kutofautisha kwenye JavaScript, kifungo gani hasa kimechaguliwa, kila kitufe cha redio katika kikundi huongezewa sifa value zenye thamani tofauti :

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

Ili kufanya kitufe chochote cha redio kichaguliwe by default, ni muhimu kupeana sifa checked:

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

Hebu tuone kwa vitendo jinsi ya kufanya kazi na vitufe kama hivyo kwenye JavaScript. Hebu tuseme tuna kikundi cha vitufe vya redio kilichoonyeshwa hapo juu, na pia kitufe cha kawaida:

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

Hebu tufanye ili kwa kubonyeza kitufe value ya kitufe hicho cha redio, ambacho kimewekwa alama kwa wakati huu, ionekane kwenye skrini.

Ili kutatua tatizo ni muhimu kupitia yote vitufe vyetu vya redio kwa kitanzi na kubaini, kipi imechaguliwa. Ili kufanya hivyo, inahitajika kusoma thamani ya sifa checked ya kila vitufe vya redio vinavyopitiwa. Ambayo sifa hiyo ni sawa na true - kitufe hicho cha redio ndicho kimechaguliwa.

Tutekeleze yaliyoelezewa:

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

Kuna vitufe 3 vya redio, aya na kitufe. Kwa kubonyeza kitufe onyesha kwenye aya value ya kitufe cha redio kilichowekwa alama.