Check & Uncheck All Checkboxs dengan Jquery
Check dan Uncheck All sering kita gunakan ketika membuat program untuk back-end, biasanya digunakan untuk menyeleksi semua postingan atau apapun sebelum di delete, atau dalam sebuah shopping cart di website e-commerce juga sering kita temui fitur untuk check dan uncheck semua barang yang ada di keranjang belanja.Ketika membuka email juga kita bisa temukan fasilitas check dan uncheck all.
Pada tulisan kali ini kita akan coba membuat check dan uncheck dengan menggunakan Jquery, semoga berguna untuk anda yang sedang belajar Jquery.
Struktur HTML
<!DOCTYPE HTML><html lang="en-US">
<head>
<title>jQuery check/uncheck all checkboxes</title>
<script type="text/javascript" src="JQUERY.js"></script>
<script type="text/javascript">
<!-- Javascript/Jquery code here -->
</script>
<style type="text/css">
<!-- CSS code here -->
</style>
</head>
<body>
<form>
<h2>Check & Uncheck with Jquery</h2>
<table border="1" cellpadding="2" cellspacing="2" id="myTable">
<tr>
<th><input type="checkbox" id="checkAll" name="checkAll" /> Check all </th>
<th>Post</th>
<th>Author</th>
</tr>
<tr>
<td><input type="checkbox" name="post_id[]" id="post_id[]" /></td>
<td>POST TITLE 1</td>
<td>AUTHOR 1</td>
</tr>
<tr>
<td><input type="checkbox" name="post_id[]" id="post_id[]" /></td>
<td>POST TITLE 2</td>
<td>AUTHOR 2</td>
</tr>
... Next Row
</table>
</form>
</body>
</html>
Code Jquery
$(document).ready(function() {$("input[name='checkAll']").click(function() {
var checked = $(this).attr("checked");
$("#myTable tr td input:checkbox").attr("checked", checked);
});
});
Code CSS
form{width:650px;margin:20px auto;}table{border-collapse:collapse;}
table,th, td{border: 1px solid black;}
td, th{padding:10px}
th{background:#fff000}
Hasilnya akan seperti ini :
Penggunaan
Biasanya jika ingin membuat fasilitas check all ini kita menggunakan array sebagai nama field checkboxpost_id[], agar bisa dengan mudah di looping saat diproses dengan PHP atau bahasa pemograman lain nya yang digunakan.
0 komentar:
Posting Komentar