Devdit
 

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

2.3K

สอนภาษา 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

เขียน 2 ปีที่แล้ว
ชอบ
ลิ้งก์
แชร์
Devdit มีช่อง YouTube แล้ว
เราสร้างวิดีโอเกี่ยวกับเทคโนโลยี ทำตามง่ายๆ