Selamat Datang

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.

Check uncheck jquery

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}

 

DEMO | DOWNLOAD

 

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:

 





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

5 thoughts on “Check & Uncheck All Checkboxs dengan Jquery

  1. Mas Huda says:

    wow…. kalau sudah seperti ini memang saya g paham

  2. Wahyu says:

    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.. :)

  3. azera says:

    kenapa saya xboleh nak check all yer.??

  4. […] Baca Juga: Tutorial Membuat Check & Uncheck All Checkboxs dengan Jquery […]

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development