jQuery ดึงข้อมูลจาก RadioButton ผ่าน attribute name

สอนเขียน jQuery ดึงข้อมูลจาก RadioButton ผ่าน attribute name บทความนี้แนะนำการใช้ jQuery Framework ดึงข้อมูลจากกลุ่มของ RadioButton หรือ input radio ของ HTML พร้อมแสดงผลลัพธ์ออกสู่หน้าจอ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง jQuery ดึงข้อมูลจาก RadioButton ผ่าน attribute name

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

<script>
    $("#btn").click(function(){
        let sex = $('input[name="sex"]:checked').val();
        alert( "คุณเลือกเพศ "+sex );
    });
</script>

1. สร้าง RadioButton และกำหนด attribute name เท่ากับ sex โดยต้องกำหนด name ให้เหมือนกัน เนื่องจาก RadioButton จะสามารถเลือกได้เพียงแค่ 1 ตัวเลือกจากทั้งหมดในกลุ่ม

2. เมื่อผู้ใช้งานเลือก และกดปุ่ม Button จะเช้าไปทำงานในฟังก์ชัน $("#btn").click

3. ใช้คำสั่ง $('input[name="sex"]:checked') หมายความว่าให้อ้างถึง input ที่ name = sex และมีค่าเท่ากับ checked คือถูกเลือกอยู่ จากนั้นใช้คำสั่ง .val เพื่อดึงค่าออกมา เก็บไว้ที่ตัวแปร sex

4. แสดงค่าจากตัวแปร sex ออกสู่หน้าเว็บไซต์ด้วยคำสั่ง alert