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