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
0 komentar: