JavaScript ดึงข้อมูลจาก RadioButton ของ HTML

สอนเขียน JavaScript ดึงข้อมูลจาก RadioButton ของ HTML บทความนี้แนะนำวิธีการใช้คำสั่ง querySelector ร่วมกับคำสั่ง checked เพื่อดึงค่าจากกลุ่มของ input type radio ที่ถูกเลือก สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง JavaScript ดึงข้อมูลจาก RadioButton ของ HTML

<input type="radio" value="ชาย" class="sex" name="sex"> ชาย /
<input type="radio" value="หญิง" class="sex" name="sex"> หญิง<br/>
<input type="button" onclick="getValue()" value="ดึงข้อมูลจาก RadioButton">

<script>
    function getValue() {
        let v = document.querySelector('input[name="sex"]:checked').value;
        console.log( "คุณเลือกเพศ "+v );
    }
</script>

ผลลัพธ์

คุณเลือกเพศ ชาย
คุณเลือกเพศ หญิง

JavaScript ดึงข้อมูลจาก RadioButton แนะนำให้ใช้คำสั่ง document.querySelector อ้างถึง input[name=sex] ทั้งหมด และดึงค่าที่ถูกเลือกคือ :checked เก็บไว้ที่ตัวแปร v จากนั้นนำตัวแปร v มาแสดงผ่านคำสั่ง console.log