การทำงานกับปุ่มเรดิโอใน JavaScript

ตอนนี้ลองมาทำงานกับ ปุ่มเรดิโอ กันบ้าง พวกมันเป็นกลุ่มของสวิตช์ ซึ่งสามารถเลือกได้เพียงอันเดียวเท่านั้น เพื่อให้ปุ่มเรดิโอหลายปุ่มเป็นกลุ่มเดียวกัน พวกมันต้องมีค่าแอตทริบิวต์ name ที่เหมือนกัน:

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

และเพื่อให้ JavaScript สามารถแยกแยะได้ว่าปุ่มไหน ถูกเลือก แต่ละปุ่มเรดิโอใน กลุ่มจะถูกเพิ่มแอตทริบิวต์ value ด้วยค่า ที่แตกต่างกัน:

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

เพื่อให้ปุ่มเรดิโอปุ่มใดปุ่มหนึ่งถูกเลือก โดยค่าเริ่มต้น จำเป็นต้องกำหนดแอตทริบิวต์ checked ให้กับมัน:

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

ลองมาดูในทางปฏิบัติว่าทำงาน กับปุ่มเหล่านี้ใน JavaScript อย่างไร ให้ เรามีกลุ่มปุ่มเรดิโอที่แสดงด้านบน และปุ่มธรรมดาอีกปุ่มหนึ่ง:

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

ลองทำให้เมื่อคลิกที่ ปุ่มนั้น ค่าของ value จากปุ่มเรดิโอที่ถูกเลือกอยู่ในขณะนั้น จะแสดงขึ้นบนหน้าจอ

สำหรับการแก้โจทย์จำเป็นต้องวนลูปผ่าน ปุ่มเรดิโอทั้งหมดของเราและตรวจสอบว่าปุ่มไหน ถูกเลือก ในการนี้จำเป็นต้องอ่าน ค่าของคุณสมบัติ checked ของแต่ละ ปุ่มเรดิโอที่วนลูป ปุ่มใดที่มีคุณสมบัตินี้ เท่ากับ 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);
    }
  }
});