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 property တန်ဖိုးကို ဖတ်ရန်လိုအပ်သည်။ ထို property သည် 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 ကို စာပိုဒ်ထဲသို့ ရိုက်ထုတ်ပါ။