วนลูป checkbox JavaScript

วนลูป checkbox JavaScript บทความนี้สอนเขียนโค้ดเข้าถึง input type checkbox หลายตัวพร้อมกันด้วยชื่อ class เดียวกันจากนั้นวนลูป และแสดงค่า checked ว่า checkbox ใดที่ถูกเลือก หรือไม่ถูกเลือก สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง วนลูป checkbox JavaScript

<div><input type="checkbox" value="red" class="color"> Red</div>
<div><input type="checkbox" value="green" class="color"> Green</div>
<div><input type="checkbox" value="blue" class="color"> Blue</div>
<div><input type="button" value="ตกลง" onclick="loopCheckBox()"></div>

<script>
    function loopCheckBox() {
        var checkbox = document.getElementsByClassName("color");
        for (var i=0; i<checkbox.length; i++) {
            console.log( checkbox[i].value+" = "+checkbox[i].checked );
        }
    }
</script>

ผลลัพธ์

red = true
green = false
blue = true

วนลูป checkbox JavaScript จากตัวอย่างมีการสร้าง checkbox พร้อมกับฟังก์ชัน JavaScript มีรายละเอียดดังนี้

1. สร้าง input type checkbox ทั้งหมด 3 ตัว คือ red, green และ blue กำหนดชื่อ class เดียวกัน แต่ value ต่างกัน

2. สร้างฟังก์ชันชื่อ loopCheckBox เมื่อผู้ใช้งานเลือก checkbox และกดปุ่ม submit โปรแกรมจะทำงานในฟังก์ชันดังกล่าว

3. ฟังก์ชัน loopCheckBox เข้าถึง class color และวนลูปด้วยคำสั่ง for พร้อมกับดึงค่าการเลือก checkbox ด้วย checked

4. กรณี checkbox ใดถูกเลือกจะคืนค่าเป็น true และกรณี checkbox ใดไม่ได้ถูกเลือกจะคืนค่าเป็น false