Skip to content
You are here: Home » Tutorial » AJAX » Pertanyaan Seputar Checkbox dan jQuery

Pertanyaan Seputar Checkbox dan jQuery

Oleh: Wahyu Wibowo |
August 8th, 2010 |
3 Comments »

Saya sering sekali menjumpai beberapa pertanyaan yang berkaitan dengan pemakaian checkbox pada jQuery di forum-forum diskusi. Ada yang menanyakan bagaimana cara mengambil nilai dari checkbox, mengetahui status checkbox, cara memilih beberapa checkbox sekaligus dan sebagainya.

Terus terang sebenarnya jQuery sudah menyediakan cukup banyak fungsi yang bisa kita pakai untuk menangani checkbox. Kita tinggal menggunakannya saja tanpa perlu melakukan coding dari awal.

Berikut ini beberapa tips sederhana bagaimana bekerja dengan checkbox pada jQuery.

1. Melihat dan Mengubah Status Checkbox

Input dengan tipe checkbox memiliki atribut checked yang menunjukkan status checkbox tersebut, apakah sedang dipilih atau tidak. Kita bisa mengetahui status tersebut menggunakan fungsi is() pada jQuery seperti contoh berikut ini:

<html>
<head>
<title>Melihat Status Checkbox</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $("input[name='btn']").click(function(){
      if ($("input[name='cb']").is(":checked"))
         msg = "Oya? Sama dong, saya juga suka.";
      else
         msg = "Nggak suka, masak sih? Enak lho!";
      alert(msg);
   });
});
</script>
</head>
<body>
<input type="checkbox" name='cb' value="Y" checked="checked" />
Saya suka sate kambing
<input type="button" name="btn" value="Lihat Status" />
</body>
</html>

Status suatu checkbox bisa kita ubah menggunakan fungsi attr() dan removeAttr() seperti contoh berikut ini:

<html>
<head>
<title>Mengubah Status Checkbox</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $("input[name='btn']").click(function(){
      if ($("input[name='cb']").is(":checked"))
         $("input[name='cb']").removeAttr("checked")
      else
         $("input[name='cb']").attr("checked", "checked");
   });
});
</script>
</head>
<body>
<input type="checkbox" name="cb" value="Y" checked="checked" />
Saya suka sate kambing
<input type="button" name="btn" value="Ubah Status" />
</body>
</html>

2. Melihat dan Mengubah Isi Checkbox

Fungsi val() pada jQuery mempunyai fungsi ganda, yaitu untuk melihat isi suatu variabel dan juga bisa dipakai untuk mengubahnya. Caranya seperti contoh berikut ini:

<html>
<head>
<title>Melihat dan Mengubah Isi Checkbox</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $("input[name='btn-1']").click(function(){
      content = $("input[name='content']").val();
      $("input[name='cb']").val(content);
   });
   $("input[name='btn-2']").click(function(){
      alert($("input[name='cb']").val());
   });
});
</script>
</head>
<body>
<input type="checkbox" name="cb" value="pertama" checked="checked" />
Saya suka sate kambing<br />
<input type="text" name="content" value="kedua" />
<input type="button" name="btn-1" value="Ubah" />
<input type="button" name="btn-2" value="Isi Sekarang" />
</body>
</html>

3. Menangani Banyak Checkbox Sekaligus

Terkadang kita harus bekerja dengan banyak checkbox sekaligus dalam suatu form, bagaimana cara menangani hal tersebut? Sebenarnya caranya tidak beda jauh dengan kalau kita bekerja dengan satu checkbox. Kita hanya perlu menggunakan pendekatan array.

<html>
<head>
<title>Menangani Banyak Checkbox Sekaligus</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $("input[name='btn-1']").click(function(){
      $("input[name='food']").attr("checked", "checked");
   });
   $("input[name='btn-2']").click(function(){
      $("input[name='food']").removeAttr("checked");
   });
   $("input[name='btn-3']").click(function(){
      jumlah = $("input[name='food']:checked").length;
      pilihan = new Array();
      $("input[name='food']:checked").each(function(i){
         pilihan[i] = $(this).val();
      });
      alert("Anda memilih: " + jumlah + ", yaitu " + pilihan);
   });
});
</script>
</head>
<body>
<p>Makanan favorit saya yaitu:</p>
<input type="checkbox" name="food" value="Sate Ayam" />Sate Ayam<br />
<input type="checkbox" name="food" value="Nasi Goreng" />Nasi Goreng<br />
<input type="checkbox" name="food" value="Soto Babat" />Soto Babat<br />
<input type="checkbox" name="food" value="Bakso" />Bakso<br />
<input type="checkbox" name="food" value="Gudeg" />Gudeg<br />
<input type="button" name="btn-1" value="Pilih Semua" />
<input type="button" name="btn-2" value="Tidak Pilih Semua" />
<input type="button" name="btn-3" value="Pilihan Saya" />
</body>
</html>

Barangkali ada yang mempunyai tips lain yang lebih canggih?

Images: Free Stock Photos.

Tulisan Terkait:

Bagaimana Komentar Anda?

Monggo kalau Anda mau mengomentari tulisan di atas! Bertanya atau mengkritik juga boleh, tapi jangan terlalu menyakitkan :).

Tinggalkan Pesan