Membuat script checkAll dengan menggunakan php, javascript dan checkbox

Seringkali kita berhadapan data tabel yang cukup banyak, dimana kita diharuskan menghapus masing - masing record dari tabel tersebut dengan cara meng - klik menu atau tombol hapus satu persatu yang pastinya juga akan sangat melelahkan jika datanya berjumlah ratusan.

Menanggapi beberapa pertanyaan pengunjung Media Kreatif sebelumnya, berikut kami sajikan tutorial singkatnya dengan menggunakan javascript dan element html ( checkbox ) .

 

Beberapa script yang harus dibuat antara lain :

Buat script ( javascript ) dalam bentuk function , bisa di simpan dalam file terpisah atau bisa juga dituliskan menjadi satu halaman seperti pada contoh berikut ini.

<script type="text/javascript"> 
//check all checkbox
function checkAll(form){
	for (var i=0;i<document.forms[form].elements.length;i++)
	{
		var e=document.forms[form].elements[i];
		if ((e.name !='allbox') && (e.type=='checkbox'))
		{
			e.checked=document.forms[form].allbox.checked;
		}
	}
}
</script>


Bagian yang bernama form dari script diatas digunakan sebagai penanda, form yang mana yang akan diakses oleh function tersebut, sedangkan bagian yang bernama forms[form] merupakan nama form yang akan diakses dan bagian yang bernama allbox merupakan nama checkbox yang akan menjadi pemicu atau tempat kita menaruh even javascript, dalam hal ini adalah onclick function.

Langkah berikutnya adalah membuat form sederhana, seperti yang penulisa sajikan berikut :

<form method="post" name="form[0]" action="">
   Centang semua <input type="checkbox" name="allbox" value="check" onclick="checkAll(0);" />
   <ol>
   <?php
   for($i=0; $i<100; $i++){
     echo '<li><input type="checkbox" name="check['.$i.']" value="'.$i.'" /> - Pilihan / opsi ke '.$i.'</li>';
   }
   ?>
 </ol>
 </form> 

Perhatikan name dari form diatas adalah form[0] , kemudian name dari checkbox adalah allbox sesuai dengan yang sudah dituliskan pada function javascript diatas.

Pada checkbox pemicu , kita pasangkan event javascript onclick untuk menjalankan function javascript checkAll( ), akan tetapi kita juga harus menentukan form[ ??? ] yang akan kita akses dengan javascript tersebut, maka dalam hal ini kita masukkan angka 0 pada checkAll(0) karena name dari form adalah form[0].

Jika ada form lain dalam satu halaman yang hendak menggunakan function javascript diatas, maka name dari formnya harus berbeda , misalnya bisa kita gunakan nama form[1] , form[2] dst , dan jangan lupa pada bagian checkbox pemicu form berikutnya juga harus menggunakan nilai yang berbeda pula. Misalnya onclick="checkAll(1);" dst.

Berikut penulis sajikan contoh script check all dengan javascript dan checkbox , silahkan download scriptnya disini

Sekian dulu tulisan singkat ini, jika ada pertanyaan seputar tulisan diatas, silahkan tuliskan pada bagian komentar dibawah .

Selamat mencoba dan Salam kreatif


Komentar pembaca

Nanda FebrianaThanks atas tutorialnya , kalo boleh tolong tuliskan tutorial yang detail seperti ini tentang AJAX mas ?posting pada :2011-11-28 11:50:49
riyanmau tnya,,,saya masukin script di atas dalam web saya kok tidak mau Y?posting pada :2012-05-20 14:16:46
AdminRiyan: Silahkan baca kembali petunjuknya dengan benar, terutama pada bagian berikut : <form method="post" name="form[0]" action=""> pada tersebut kita menamakan form dengan nama form[0], sehingga pada bagian <input type="checkbox" name="allbox" value="check" onclick="checkAll(0);" /> kita masukkan event onclick yang memanggil fungsi checkall() dengan value yang kita masukkan adalah angka 0.posting pada :2012-05-21 05:59:41
sanitruz lanjut untuk proses pada mysql_query ny gmn boz?? pada database nya agar bisa di update sekaligus....posting pada :2014-04-25 23:31:29
Pandu Aldi PratamaAlhamdulillah . . . . terima kasih atas tutorialnya... semalem ane ngoprak ngoprek ga ketemu. sekarang sudah bisa.. :Dposting pada :2015-02-20 17:02:41
Ilham AswadBagaimana kalo menggunakan 2 kolom, dengan mengunakan id atau class, bisa buat contoh tutorialnya gak om ?posting pada :2018-03-06 10:01:43