Jika pada tulisan saya mengenai select dan unselect all checkbox versi 1 menggunakan button, pada tulisan yang versi 2 ini menggunakan data dalam tabel. Sehingga bisa diterapkan untuk data-data dari database. Disini saya hanya menjelaskan pembuatan pada fungsi HTML biasa.
Bagaimana penerapannya, silahkan ikuti langkah-langkahnya berikut:
Fungsi berikut diterapkan berdasarkan data dalam tabel. Hanya menggunakan fungsi checkbox untuk select dan unselect all item.
Berikut code HTMLnya:
Simpan dengan format .html
Tampilannya seperti berikut:
Bagaimana penerapannya, silahkan ikuti langkah-langkahnya berikut:
Fungsi berikut diterapkan berdasarkan data dalam tabel. Hanya menggunakan fungsi checkbox untuk select dan unselect all item.
Berikut code HTMLnya:
<html>
<head>
<title>Select and Unselect Checkbox</title>
</head>
<script>
function CheckAll(){
if(document.form1.chkAll.checked == true){
for(var j = 0; j < document.form1.length; j++){
if(document.form1.elements[j].name == "chk[]"){
document.form1.elements[j].checked = true;
}
}
}
else if(document.form1.chkAll.checked == false){
for(var j = 0; j < document.form1.length; j++){
if(document.form1.elements[j].name == "chk[]"){
document.form1.elements[j].checked = false;
}
}
}
}
</script>
<body>
<form name="form1" method="post" action="delete-kategory.php">
<table border="1">
<tr>
<th width="33"><input name="chkAll" type="checkbox" id="chkAll" value="1" onClick="CheckAll();"></th>
<th width="100">Nama</th>
<th width="100">Alamat</th>
<th width="100">No.Telp</th>
<th width="100">Tgl.Lahir</th>
</tr>
<tr>
<td width="33" align="center"><input type="checkbox" name="chk[]"/></td>
<td width="100" align="center">Nama 1</td>
<td width="100" align="center">Alamat 1</td>
<td width="100" align="center">No.Telp 1</td>
<td width="100" align="center">Tgl.Lahir 1</td>
</tr>
<tr>
<td width="33" align="center"><input type="checkbox" name="chk[]"/></td>
<td width="100" align="center">Nama 2</td>
<td width="100" align="center">Alamat 2</td>
<td width="100" align="center">No.Telp 2</td>
<td width="100" align="center">Tgl.Lahir 2</td>
</tr>
<tr>
<td width="33" align="center"><input type="checkbox" name="chk[]"/></td>
<td width="100" align="center">Nama 3</td>
<td width="100" align="center">Alamat 3</td>
<td width="100" align="center">No.Telp 3</td>
<td width="100" align="center">Tgl.Lahir 3</td>
</tr>
<tr>
<td width="33" align="center"><input type="checkbox" name="chk[]"/></td>
<td width="100" align="center">Nama 4</td>
<td width="100" align="center">Alamat 4</td>
<td width="100" align="center">No.Telp 4</td>
<td width="100" align="center">Tgl.Lahir 4</td>
</tr>
<tr>
<td width="33" align="center"><input type="checkbox" name="chk[]"/></td>
<td width="100" align="center">Nama 5</td>
<td width="100" align="center">Alamat 5</td>
<td width="100" align="center">No.Telp 5</td>
<td width="100" align="center">Tgl.Lahir 5</td>
</tr>
<tr>
<td width="33" align="center"><input type="checkbox" name="chk[]"/></td>
<td width="100" align="center">Nama 6</td>
<td width="100" align="center">Alamat 6</td>
<td width="100" align="center">No.Telp 6</td>
<td width="100" align="center">Tgl.Lahir 6</td>
</tr>
</table>
</form>
</body>
</html>Simpan dengan format .html
Tampilannya seperti berikut:
Tidak ada komentar:
Posting Komentar