Manipulasi CheckBox Menjadi Check All Menggunkan Jquery

Fasilitas email menyediakan fasilitas inbox,juga meneyediakan fasilitas spam unutuk menampung email sampah ,sebaiknya di buang aj email tersebut dari pada ngotor-ngotorin atau menuh - menuhi space.


Problemnya adalah kebanyakan email sampah akan sangat merepotkan kalau membuangnya/menghapusnya dengan cara mencentang chekboxnya satu persatu.Namun ada cara efektif dimana apabila di klik check all akan mengakibatkan semua checkbox tertandai/tercentang.untuk lebih jelasnya lihat skrip berikut ini ( perhatiakn teks yang ditebalkan )


<html>
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {

// Ketika checgkbox dengan id ceksemua di click,


// maka semua checkbox akan tercentang

$('#ceksemua').click(function () {
$(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);
});


});
</script>
</head>
<body>
<div class="demo" style="width: 250px;">
<form>
<h4>Kategori buku yang Anda minati?: </h4>
<fieldset>
<input type="checkbox" name="cek1"> Desain Grafis<br>
<input type="checkbox" name="cek2">Pemrograman<br>
<input type="checkbox" name="cek3"> Internet<br>
<input type="checkbox" name="cek4"> Perkantoran (Office)<br>
<input type="checkbox" name="cek5"> Komputer Teknis<br><hr>

<input type="checkbox" id="ceksemua">Check All<br>

</fieldset>
</form>
</div>
</body>
</html>

 

Kesimpulan

Setelah semua elemen di tampilkan tahap  berikutnya adalah memilih elemen berdasarkan class atau id yang di defenisikan contoh  script  di atas menggunkankan selector is #CEKSEMUA

$('#ceksemua').click(function () {
$(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);
});

 

<input type="checkbox" id="ceksemua">Check All<br>

 

dan hasilnya seperti gambar berikutynya

oia jang lupa untuk pemanggilan jquerynya seperti contoh diatas

<script type="text/javascript" src="jquery-1.4.js"></script>


Kunjungi www.prowebpro.com untuk menambah wawasan anda.


Web Design Packages

Address