JavaScript เลือก Checkbox ทั้งหมด

สอนภาษา JavaScript เขียนโค้ดเลือก Checkbox ทั้งหมด โดยเข้าถึง Checkbox ของภาษา HTML ทั้งหมดผ่าน Class และการวนลูปทีละตัว จากนั้นใช้ attribute checked ในการเปลี่ยนสถานะของ Checkbox สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง JavaScript เลือก Checkbox ทั้งหมด

<input type="checkbox" id="check_all" onclick="checkAll()"> เลือกทั้งหมด<br/>
<input type="checkbox" class="check_lang"> JavaScript<br/>
<input type="checkbox" class="check_lang"> PHP<br/>
<input type="checkbox" class="check_lang"> HTML<br/>

<script>
    function checkAll() {
        var ck = document.getElementsByClassName("check_lang");
        if ( document.getElementById('check_all').checked ) {
            for (var i=0; i<ck.length; i++) { 
                ck[i].checked = "checked"; 
            }
        } else {
            for (var i=0; i<ck.length; i++) { 
                ck[i].checked = ""; 
            }
        }
    }
</script>

1. สร้าง Checkbox HTML แบบเลือกทั้งหมด มีค่า id คือ check_all เมื่อผู้ใช้งานกดคลิก Checkbox ผ่านคำสั่ง onclick จะเรียกใช้ฟังก์ชัน checkAll ของภาษา JavaScript

2. ภายในฟังก์ชัน checkAll จะเข้าถึง Checkbox ทั้งหมดผ่าน Class check_lang

3. กรณีถ้า Checkbox แบบเลือกทั้งหมดถูกเลือก จะวนลูป Checkbox class check_lang ทั้งหมดและเปลี่ยนสถานะเป็นถูกเลือก ผ่าน attribute checked

4. กลับกันถ้า Checkbox แบบเลือกทั้งหมดถูกยกเลิก (ไม่เลือก) จะวนลูป Checkbox class check_lang ทั้งหมดและเปลี่ยนสถานะเป็นยกเลิก (ไม่ถูกเลือก) ผ่าน attribute checked