jQuery ดึงข้อมูลจาก Checkbox และวนลูปแสดงข้อมูล

สอนเขียน jQuery ดึงข้อมูลจาก Checkbox และวนลูปแสดงข้อมูล บทความนี้แนะนำการดึงข้อมูลจาก Checkbox ด้วย jQuery Framework โดยการวนลูปด้วยคำสั่ง each จาก Checkbox ที่ถูกติ๊กเลือก หรือ checked สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง jQuery ดึงข้อมูลจาก Checkbox และวนลูปแสดงข้อมูล

<input type="checkbox" name="language" value="HTML"> HTML <br/>
<input type="checkbox" name="language" value="JavaScript"> JavaScript <br/>
<input type="checkbox" name="language" value="jQuery"> jQuery <br/>
<input type="button" id="btn" value="ดึงข้อมูลจาก Checkbox">

<script>
    $("#btn").click(function(){
        $('input[name="language"]:checked').each(function() {
            console.log( this.value );
        });
    });
</script>

1. กำหนด attribute name ให้กับ input checkbox พร้อมค่าที่ต้องการใน attribute value

2. เมื่อผู้ใช้งานกดปุ่ม button จะเข้าไปทำงานในฟังก์ชัน $("#btn").click เนื่องจาก buttom มีค่า id = btn

3. วนลูปโดยใช้คำสั่ง each โดยวนลูปเท่ากับจำนวน input name = language ที่มีค่า checked คือถูกติ๊กเลือก

4. ทุกครั้งที่วนลูปจะเข้าไปทำงานในปีกกาของ each(function() พร้อมกับแสดงค่า Checkbox ที่ถูกเลือก ด้วยคำสั่ง this.value ผ่าน console.log