জাভাস্ক্রিপ্টে রেডিও বাটন নিয়ে কাজ

এখন চলুন রেডিও বাটন নিয়ে কাজ করি। এগুলি এমন সুইচের একটি গ্রুপ, যেখান থেকে শুধুমাত্র একটি নির্বাচন করা যেতে পারে। বেশ কয়েকটি রেডিও বাটনকে একটি গ্রুপ করতে হলে, তাদের অবশ্যই একই অ্যাট্রিবিউট মান থাকতে হবে name:

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

আর জাভাস্ক্রিপ্টে区别 করতে কোন বাটনটি নির্বাচন করা হয়েছে, প্রতিটি রেডিও বাটনে গ্রুপে বিভিন্ন মান সহ value অ্যাট্রিবিউট যোগ করা হয়:

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

ডিফল্টরূপে কোন রেডিও বাটন চিহ্নিত করতে, তাকে checked অ্যাট্রিবিউট দিতে হবে checked:

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

চলুন অনুশীলনে দেখি কিভাবে জাভাস্ক্রিপ্টে এই ধরনের বাটন নিয়ে কাজ করতে হয়। ধরুন আমাদের উপরে উপস্থাপিত রেডিও বাটনগুলির একটি গ্রুপ আছে, এবং একটি সাধারণ বাটনও আছে:

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

চলুন এমন করি যাতে বাটনে ক্লিক করলে পর্দায় value প্রদর্শিত হয় সেই রেডিও বাটনের, যা বর্তমানে চিহ্নিত আছে।

সমস্যা সমাধানের জন্য আমাদের সকল রেডিও বাটন লুপ দিয়ে ঘুরে দেখতে হবে এবং নির্ধারণ করতে হবে, কোনটি নির্বাচন করা হয়েছে। এর জন্য প্রয়োজন প্রতিটি ঘোরানো রেডিও বাটনের checked property এর মান পড়া। যার এই property সমান true - সেই রেডিও বাটনই নির্বাচিত।

বর্ণিতটি বাস্তবায়ন করি:

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