Membuat Select Deselect All Checkbox Dengan JQuery -

Pada kesempatan kali ini saya akan memberikan tutorial tentang Membuat Select Deselect All Checkbox Dengan JQuery . Baiklah dalam study kasus kali ini bagaimana siih cara membuat checklist semua pada checkbox atau menghapus select checklist nya. Disini saya akan membuat dengan cara yang sederhana supaya sahabat bisa memahami dan mengerti dalam pembahasan kali ini.Sebelum dimulai semoga konsepnya sahabat sudah paham yaa, bagaimana cara select/deselect all pada checkbox, oke mari kita mulai saja cara membuatnya coba ikutin langkah-langkah berikut ini :

Langkah pertama sahabat buat file html terlebih dahulu untuk tampilannya, saya disini menggunakan template dari bootstrap saja supaya mudah mengaplikasikannya. Yuuk ketikkan code dibawah ini:

Ini untuk bagian headnya atau script template bootstrap yang dipakai

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Select Deselect All  Dengan JQuery</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

	
</body>
</html>

Ini untuk desainnya atau kita membuat beberapa checkbox

<div class="container bg-info text-">
		<div class="check mt-3 py-3">
			<label for="">
				<input type="checkbox" id="checkall"> <span class="badge badge-pill badge-warning text-wrap" style="width: 5rem;">Pilih Semua</span>
			</label>
		</div>
		<div class="row">
			
			<div class="col-md-4 py-2">
				<div class="check">
					<label for="">
						<input type="checkbox" class="checkitem "> Menu 1
					</label>
				</div>
				<div class="check">
					<label for="">
						<input type="checkbox" class="checkitem"> Menu 2
					</label>
				</div>
				<div class="check">
					<label for="">
						<input type="checkbox" class="checkitem"> Menu 3
					</label>
				</div>
				<div class="check">
					<label for="">
						<input type="checkbox" class="checkitem"> Menu 4
					</label>
				</div>
			</div>
			<div class="col-md-4 py-2">
				<div class="check">
					<label for="">
						<input type="checkbox" class="checkitem"> Menu 5
					</label>
				</div>
				<div class="check">
					<label for="">
						<input type="checkbox" class="checkitem"> Menu 6
					</label>
				</div>
				<div class="check">
					<label for="">
						<input type="checkbox" class="checkitem"> Menu 7
					</label>
				</div>
				<div class="check">
					<label for="">
						<input type="checkbox" class="checkitem"> Menu 8
					</label>
				</div>				
			</div>
			<div class="col-md-4 py-2">
				<div class="check">
					<label for="">
						<input type="checkbox" class="checkitem"> Menu 9
					</label>
				</div>
				<div class="check">
					<label for="">
						<input type="checkbox" class="checkitem"> Menu 10
					</label>
				</div>
				<div class="check">
					<label for="">
						<input type="checkbox" class="checkitem"> Menu 11
					</label>
				</div>
				<div class="check">
					<label for="">
						<input type="checkbox" class="checkitem"> Menu 12
					</label>
				</div>
			</div>
		</div>
	</div>

Langkah selanjutnya tambahkan script dari JQuery dibawah ini :

<script>
		// fungsi saat ingin di check all atau dipilih semua
		$("#checkall").change(function(){
			$(".checkitem").prop("checked", $(this).prop("checked"))
		})
		// berfungsi untuk mengubah beberapa item checkbox terpilih(checklist) semua atau tidak terpilih (unchecklist)
		$(".checkitem").change(function(){
			if($(this).prop("checked")==false){
				$("#checkall").prop("checked",false)
			}
			// saat beberapa item terpilih dan hampir semua maka akan pada checkbox yang memiliki id CHECKALL terchecklist
			if($(".checkitem:checked").length == $(".checkitem").length){
				$("#checkall").prop("checked",true)
			}
		})
	</script>

Pada script diatas dijelaskan pada

keterangan pertama terdapat id = checkall berfungsi dimana beberapa checkbox dapat dipilih semuanya dengan memilih checkbox yang memiliki id = checkall,
keterangan kedua digunakan saat beberapa checkbox yang sudah dipilih, dapat di unchecklist atau juga bisa di checkall.
keterangan ketiga digunakan saat checkbox dengan class = checkitem terpilih semua maka checkbox id = checkall akan terchecklist, jika salah satu checkbox class = checkitem tidak dipilih maka tidak akan terchecklist pada checkbox id = checkall

Sekarang coba kita lihat hasilnya berikut ini tampilannya:

Demikian pembahasan pada artikel kali ini tentang Membuat Select Deselect All Checkbox Dengan JQuery, semoga bermanfaat dan selamat mencoba.

terima kasih

Membuat Select Deselect All Checkbox Dengan JQuery

Kategori