Jika kita sedang membuat suatu aplikasi yang memiliki jumlah Checkbox yang cukup banyak, kita harus mempertimbangkan untuk membuat check / uncheck all untuk memfasilitasi jika pengguna ingin memilih
semua pilihan dengan cara efektif daripada mengkliknya satu persatu. Pada pembahasan kali ini kita akan membuat semua checkbox terceklis atau tidak dengan satu kali klik menggunakan jQuery.
Kode JQuery
Untuk syntak jquery yang digunakan cukup mudah hanya memerlukan beberapa baris saja, seperti berikut,
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#checkall").click(function(){
$("#checkboxes").find(":checkbox").attr("checked",this.checked);
});
})
</script>
Kode HTML
<body>
<div id="box">
Silahkan Pilih (boleh lebih dari satu)
<div id="checkboxes">
<input type="checkbox" value="Java">Java <br>
<input type="checkbox" value="PHP">PHP <br>
<input type="checkbox" value="JavaScript">JavaScript <br>
<input type="checkbox" value="HTML">HTML <br>
<input type="checkbox" value="CSS">CSS <br>
<hr>
<input type="checkbox" id="checkall" >Check/Uncheck All <br>
</div>
</div>
</body>
Kode CSS
<style type="text/css">
#box{
width:500px;
background:#96A8E0;
padding:10px;
border:solid #4968CC;
margin:0 auto;
}
input{
margin-right: 10px;
}
</style>
Demikian sedikit penjelasan untuk membuat check/uncheck all dengan menggunakan jQuery. Untuk contohnya bisa dilihat di link Berikut.
Semoga bermanfaat..
No comments:
Post a Comment