Tag Archive | "Belajar javascript"

Tags: ,

Tutorial Javascript : Membuat check all dan uncheck all


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 :
Quick Code


< !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 &raquo;</a>';
}
?>
 
</script></html>

Silahkan lihat Demo nya disini
Atau Download disini

Posted in JavascriptComments (3)

  • Popular
  • Comments
  • Tags
  • Subscribe
Advertise Here

Category

Tag Cloud