Tulisan ini cukup sederhana yaitu bagaimana kita membuat tombol untuk menangani checklist yang banyak, check all dan uncheck all.
Disini saya membuatnya dengan javascript, silahkan lihat kode nya dibawah ini :
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Latihan Javascript :: membuat check all dan uncheck all</title>
</head>
<script type="text/javascript">
function Check(){
//Ambil semua elemen dalam id formCheck
allCheckList = document.getElementById("formCheck").elements;
//Hitung banyaknya elemen
jumlahCheckList = allCheckList.length;
//Jika tombolCheck bernilai "Check All"
if(document.getElementById("tombolCheck").value == "Check All"){
for(i = 0; i < jumlahCheckList; i++){
//semua elemen ke-i checkbox nya diset true (dicentang)
allCheckList[i].checked = true;
}
//Set nilai tombolCheck menjadi "Uncheck All"
document.getElementById("tombolCheck").value = "Uncheck All";
//Jika tombolCheck tidak bernilai "Check All" (sudah dirubah menjadi Uncheck All)
}else{
for(i = 0; i < jumlahCheckList; i++){
//semua elemen ke-i checkbox nya diset false (tidak dicentang)
allCheckList[i].checked = false;
}
//Set nilai tombolCheck menjadi "Check All"
document.getElementById("tombolCheck").value = "Check All";
}
}
</script>
< ?php
$hobi = $_POST['hobi'];
if(empty($hobi)){
?>
<b>Silahkan Pilih Hobi Anda :</b>
<form id="formCheck" method="POST" action="check_all.php">
<input type="checkbox" name="hobi[1]" value="Baca Koran" />Baca Koran<br />
<input type="checkbox" name="hobi[2]" value="Memancing" />Memancing<br />
<input type="checkbox" name="hobi[3]" value="Bikin Susah Orang" />Bikin Susah Orang<br />
<input type="checkbox" name="hobi[4]" value="Menulis" />Menulis<br />
<input type="checkbox" name="hobi[5]" value="Demonstrasi" />Demonstrasi<br />
<input type="button" id="tombolCheck" value="Check All" onClick="Check();"/>
<input type="submit" value="Submit" />
</form>
< ?php
}
if(is_array($hobi)){
echo '<b>Hobi yang anda pilih : <br />';
foreach($hobi as $indek=>$namahobi){
echo 'Hobi indek '.$indek.' : '.$namahobi.'<br />';
}
echo '<a href="check_all.php">Back »</a>';
}
?>
</script></html>
Silahkan lihat Demo nya disini
Atau Download disini
No comments:
Post a Comment