Sebenarnya sudah ada library pada JQuery yang menangai tentang CheckAll dan UnCheck dan implementasinya pun mudah. Tetapi pada postingan ini saya akan mecoba untuk tanpa menggunakan library JQuery, tentu hal ini hanya untuk sobat semua yang ingin dan baru belajar javascript agar mengerti beberapa fungsi di javascript.
Nah berikut ini saya contohkan kode penggunaan fungsi javascript, yang bisa sobat implementasikan pada program yang sobat buat. berikut kodenya :
<script type="text/javascript">
function checkAll(form){
for (var i = 0; i < document.forms[form].elements.length; i++) {
var e = document.forms[form].elements[i];
if ((e.name != 'cek_semua') && (e.type == 'checkbox')) { // untuk name sesuaikan dengan nama pada checkbox master.
e.checked = document.forms[form].cek_semua.checked;
}
}
}
</script>
Syntax diatas adalah kode javascript yang berfungsi untuk melakukan eksekusi CheckAll/Uncheck pada element checkbox master. bisa dilihat bahwa kode diatas terdapat function dengan parameter form. parameter tersebut yang nanti akan mementukan nilai array pada tabel. kemudian didalam function tersebut terdapat kode perulangan menggunakan for yang nanti akan menjadi acuan jika nilai array yang diberikan pada tabel belum habis, maka akan terus melakukan perulangan dengan ekspresinya mengisi attr checked setiap checkbox dengan nilai sesuai dengan parameternya.
Oke sekarang saya akan mengimplementasikan fungsi tersebut didalam tabel agar bisa Checkall dan UncheckAll. Pada kesempatan ini saya tidak menggunakan database untuk data tabelnya. Hanya saja ini bisa dilakukan jika sobat memodifikasi sedikit syntax yang saya berikan. Silahkan Tulis kode Berikut, Boleh juga dicopy paste. Tetapi karna ini untuk belajar saya harap sobat tidak mengcopy paste syntax dibawah. Karna dengan menulis kita lebih mudah mengingat dari pada hanya copypaste..hehe. Oke Berikut Kode Programnya :
<?php
/**
* author pandu aldi pratama
* Copyright 2015 : by. http://angkringanblogpandu.blogspot.com/
*/
error_reporting(E_ALL^E_NOTICE);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CheckAll_UnCheckAll</title>
<!-- kode javascript untuk checkall -->
<script type="text/javascript">
function checkAll(form){ //fungsi dengan parameter form
for (var i = 0; i < document.forms[form].elements.length; i++) { // membuat perulangan untuk mengulang nilai array pada checkbox agar dapat digunakan
var cek = document.forms[form].elements[i]; //mendeklarasikan variable cek
if ((cek.name != 'cek_semua') && (cek.type == 'checkbox')) {
cek.checked = document.forms[form].cek_semua.checked;
}
}
}
</script>
</head>
<body>
<h2> Membuat CheckAll dan UnCheckAll dengan javascript</h2>
<hr>
<form action="" method="post" name="form[0]"> <!-- form ini yang digunakan untuk parameter dari fungsi javascript -->
<table border=1>
<thead>
<tr>
<th><input type="checkbox" name="cek_semua" onclick="checkAll(0)"></th> <!-- checkbox master yang digunakan untuk menjadi acuan checkbox yang ada dibawahnya.. -->
<th>Judul</th>
<th>isi</th>
</tr>
</thead>
<tbody> <!-- deklarasi body table -->
<?php
for ($i=0; $i < 10; $i++) { // deklarasi syntax perulangan untuk menentukan jumlah data pada tabel sekaligus menjadi acuan parameter checkbox
?>
<tr>
<td><input type="checkbox" name="cek[<?php echo $i ?>]" value="<?php echo $i ?>"></td> <!-- membuat chckbox dengan nama cek dengan nilai array sesuai yang du ulang -->
<td>Judul pada tabel</td>
<td>isi pada tabel</td>
</tr>
<?php
}
?>
</tbody>
</table>
</form>
</body>
</html>
Oke saya akan menjelaskan sedikit tentang kode diatas. pada tabel tersebut terdapat form dimana form inilah yang nanti akan menjadi nilai array untuk awal parameter pertama dari function yang terdaoat di kode javascript tersebut. isi nama form[0]. Selanjutnya terdapat pula pada bagian thead tabel. element checkbox dengan attribut onclick dimana terdapat pemanggilan fungsi chekcAll(0) yang dibuat pada javascript. dari pemanggilan fungsi tersebut artinya parameter yang diberikan function tersebut adalah 0 yang berarti awal dari nilai array yang akan dieksekusi untuk mengaktifkan attr checked pada setiap checkbox yang bernilai array tersebut.
Jika sobat semua ingin mengimplementasikan ini pada tabel yang berisi data yang ada didatabase (halaah ribet banget ngomongnya... hehe). maka tidak jauh beda dengan kode yang ada diatas, hanya saja sobat harus mendeklarasikan variable baru dengan nilai 0 kemudaian dimasukan ke dalam name pada checkbox.
contoh :
<tbody> <!-- deklarasi body table -->
<?php
$query = mysql_query("disini queri database");
while ($fetch_query = mysql_fetch_array($query)) { // ini untuk menampilkan semua data pada database
?>
<tr>
<td><input type="checkbox" name="cek[]" value="<?php echo $fetch_query['biasanya ini id'] ?>"></td> <!-- perhatikan name pada checkbox -->
<td><?php echo $fetch_query['isi tampil kolom'] ?></td>
</tr>
<?php
}
?>
</tbody>
Nah contoh diatas adalah penerapan checkAll/UncheckAll jika tabel sobat terintegrasi dengan database.
Oke sob sekian tips yang saya berikan untuk mengawali pembahasan javascript. semoga postingan ini bermanfaat untuk sobat semua. Jika sobat ingin mendownload filenya bisa lik link yang ada di akhir postingan ini. Silahkan Share sebanyak-banyaknya ke teman yang membutuhkan, tapi jangan lupa kasih sumber ya,, hehehe. Selamat Malam dan Selamat Malam Minggu .. : D
SALAM BLOGGER!!!
link download file :
makasih, kebetulan banget nih dapet tutor yang pas
ReplyDeletesiiipppp
Deletemakasih banyak mas...
ReplyDeletesiaapp ...
Delete