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

สอนเขียน JavaScript ดึงข้อมูลจาก Checkbox ของ HTML บทความนี้แนะนำการใช้คำสั่ง getElementsByClassName ร่วมกับคำสั่ง for เพื่อวนลูปดึงข้อมูลจาก Checkbox ของ HTML สามารถเขียนโปรแกรมได้ดังนี้

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

<input type="checkbox" value="JavaScript" class="chk"> JavaScript<br/>
<input type="checkbox" value="HTML" class="chk"> HTML<br/>
<input type="checkbox" value="CSS" class="chk"> CSS<br/>
<input type="button" onclick="getValue()" value="ดึงข้อมูลจาก Checkbox">

<script>
    function getValue() {
        var e = document.getElementsByClassName('chk');
        for(var i=0; e[i]; ++i){
            if(e[i].checked){
                console.log( "คุณเลือก "+e[i].value );
            }
        }
    }
</script>

ผลลัพธ์

คุณเลือก JavaScript
คุณเลือก CSS

JavaScript ดึงข้อมูลจาก Checkbox แนะนำให้ใช้คำสั่ง document.getElementsByClassName อ้างถึง class ของ checkbox ทั้งหมด ตัวอย่างคือ chk จากนั้นวนลูปเท่ากับจำนวนของ checkbox ที่ถูกอ้างถึงผ่าน class และใช้คำสั่ง checked เพื่อเช็คว่า checkbox ติ๊กถูกหรือไม่ ถ้าติ๊กถูกให้แสดงค่าของ checkbox ตัวดังกล่าวออกมาด้วยคำสั่ง console.log