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.


Share |

Portfolio

www.wearnespc.comwww.solper.comwww.autojaya.comwww.intisolar.comsmartprint.co.idwww.ottopharm.comoliser.co.idAnd More ....

Livechat

  • Sonny
    Marketing

  • Aris G
    Support

  • Agus
    Support

  • Kurnianto
    Support

  • Eko P
    Designer

  • Andreas
    Designer

  • LiveZilla Live Help

Address

PT. Proweb Indonesia
Perkantoran Duta Merlin No F4
Jl. Gadjah Mada 3-5
Jakarta Pusat
GPS: S 6o 09' 58.1", E 106o 49' 3.3"

 

Phone : 021 - 2636 3170
    021 - 3377 0050
     
Mobile : 0856 - 9360 1378
    0812 - 806 2772
    0857 - 1586 8992
    0816 - 180 8005
     
Blackberry PIN : 23096502
     
Fax : 021 - 633 5765
     
Web : www.proweb.co.id