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>
<div align="center"><a href="http://tutorial-webdesign.com">Wakaka Design</a> | <a href="http://tutorial-webdesign.com/check-uncheck-all-jquery">Back to tutorial</a></div>
</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}
Penggunaan
Biasanya jika ingin membuat fasilitas check all ini kita menggunakan array sebagai nama field checkbox post_id[], agar bisa dengan mudah di looping saat diproses dengan PHP atau bahasa pemograman lain nya yang digunakan.
Oke sekian tulisan kali ini, Salam Wakaka Design :D
Ref:
wow…. kalau sudah seperti ini memang saya g paham
:)
salam kenal semua.. :)
sangat bermanfaat sekali.. :D
oy mas saya ada yg mau ditanyakan :
saya punya input text terisi yg berulang (perulangan) misalkan 5 (5 baris), kemudian ada button (5 button) disetiap samping kirinya. Nah, ketika button ini di tekan, maka otomatis value (nilai) pada input text otomatis akan kosong.
Jd yg ingin saya tanyakan, bagaimana caranya agar nilai pada input menjadi kosong pada baris itu saja jika button di tekan, misalkan button pada baris ke-3 yg di tekan, maka nilai pada input baris ke-3 saja yg menjadi kosong, sementara yg lain tetap terisi..???
tolong mas saya butuh bgt bantuannya, Thx.. :)
kenapa saya xboleh nak check all yer.??
[…] Baca Juga: Tutorial Membuat Check & Uncheck All Checkboxs dengan Jquery […]