Select All pada Checkbox dengan JQuery

18 February 2011

Tutorial yang saya akan tulis kali ini adalah membuat sebuah fasilitas select all pada checkbox dengan menggunakan JQuery.
Dengan memanfaatkan JQuery kita bisa dengan mudah membuat fasilitas select all pada checkbox.
Select all akan berguna jika kita memiliki data dengan jumlah banyak.

Contoh :


Pada gambar tersebut memperlihatkan pada kita fasilitas select all akan mempermudah kita jika ingin menghapus seluruh data.
Tentunya selain mempermudah dalam menghapus data penggunaan select all pada checkbox juga bisa diterapkan untuk yang lainnya semisal update data secara simultan.

Pada tutorial ini saya akan membuatnya menggunakan JQuery.
Selain menggunakan JQuery anda juga bisa alternatif lainnya yaitu Javascript.

Berikut langkahnya :
1. Masukan kode berikut ini diantara <head> dan </head> :
<script type="text/javascript" src="jquery.js"></script>
2. Masukan kode berikut ini diantara <body> dan </body> :
<script type="text/javascript">
$(document).ready(function() {
$("#cekall").click(function () {
$('.cek').attr('checked', this.checked);
});
$(".cek").click(function(){
if($(".cek").length == $(".cek:checked").length) {  $("#cekall").attr("checked", "checked");
} else {
$("#cekall").removeAttr("checked");
}
});
})
</script>
3. Menggunakan pada checkbox :
Tutorial Select All pada Checkbox dengan JQuery<br>
<input type="checkbox" name="cek1" class='cek' value="Data1">Data1<br>
<input type="checkbox" name="cek2" class='cek' value="Data2">Data2<br>
<input type="checkbox" name="cek3" class='cek' value="Data3">Data3<br><br> 
<input type="checkbox" id="cekall">Select All<br>
Kode secara lengkapnya adalah sebagai berikut :
<html>
<head>
<title>Select All dengan JQuery</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$("#cekall").click(function () {
$('.cek').attr('checked', this.checked);
});
$(".cek").click(function(){
if($(".cek").length == $(".cek:checked").length) {
$("#cekall").attr("checked", "checked");
} else {
$("#cekall").removeAttr("checked");
}
});
})
</script>
Tutorial Select All pada Checkbox dengan JQuery<br>
<input type="checkbox" name="cek1" class='cek' value="Data1">Data1<br>
<input type="checkbox" name="cek2" class='cek' value="Data2">Data2<br>
<input type="checkbox" name="cek3" class='cek' value="Data3">Data3<br><br>
<input type="checkbox" id="cekall">Select All<br>
</body>
</html>
Klik Download Select All pada Checkbox dengan JQuery untuk mendownload file contoh.
Semoga bermanfaat Select All pada Checkbox dengan JQuerySocialTwist Tell-a-Friend

0 comments:

Post a Comment

Artikel Lain

 
 
 

Go To Link

  »  A1VBCode
  »  Bina Sarana Informatika
  »  Blogger
  »  Deconstruction Code
  »  Diskusiweb
  »  dremi.info
  »  Echo
  »  Facebook
  »  Gary Abraham
  »  Ilmu Website
  »  JQuery
  »  Mahesajenar Widget
  »  STMIK Nusa Mandiri
  »  OOM Blog
  »  Planet Source Code
  »  Rahma Blog
  »  Terren Jr
  »  VB-Bego
  »  Herry Blog

Advertisement