Javascript for checked all html checkbox

Kalo kamu web developer pasti sering membuat list (table) yang menampilkan item dalam banyak baris dengan checkbox, dan membuat satu checkbox yang berfungsi untuk memilih semua item tersebut. Contoh halaman seperti itu bisa kita lihat di "Check Mail"-nya yahoo yang berfungsi untuk memilih item email yang akan diproses, misalnya dihapus.

Yang sering terlewat ketika kita membuat halaman seperti itu adalah, pengecekan apakah item dengan checkbok muncul hanya ada satu atau lebih dari satu atau bahkan tidak ada. Kita biasanya membuat satu chekbox yang berfungsi untuk memilih semua item tersebut selalu tampil walaupun tidak ada item/checkbox dalam list. Biasanya yang terjadi adalah script yang kita buat error karena kita lupa untuk mengecek apakah ada atau tidak, atau jika ada jumlahnya satu atau lebih dari satu.

Karena kita tidak tahu berapa record/item data yang akan muncul, maka di script yang kita buat perlu mengecek apakah ada tidaknya checkbox dan jumlah checkbox. Pengecekan jumlah checkbox dilakukan karena pada javascript penanganan satu checkbox dengan array checkbox (lebih dari datu) berbeda.

Dibawah ini contoh suatu form dengan sebuah checker yaitu checkbox yang berfungsi untuk mengmilih semua checkbox yang bernama userIds.

<form name="listUserForm">
<input name="checker" onclick="checkAll(document.listUserForm.userIds, this)" type="checkbox">
<input name="userIds" type="checkbox">
<input name="userIds" type="checkbox">
<input name="userIds" type="checkbox">
</form>

Script untuk form diatas seperti ini:

<script language="javascript">
  function checkAll(checklist, checker) {
     if (checklist) {
        if (checklist.length > 0) {
            for (i = 0; i < checklist.length; i++) {
              checklist[i].checked = checker.checked;
           }
        } else {
           checklist.checked = checker.checked;
        }  
     }
  }
</script>

Dengan pengecekan (checklist.length > 0) script kita aman dari bug.