Script cara membatasi pilihan pada checkbox dengan javascript

Menanggapi pertanyaan beberapa pembaca pada Media Kreatif tentang Bagaimana cara membatasi pilihan pada checkbox, berikut kami berikan contoh sederhana dalam membuat sebuah batasan dalam pemilihan Checkbox. Dalam contoh kali ini, pembaca dapat menggunakan Javascript function yang hanya terdiri dari beberapa baris saja, akan tetapi sudah dapat digunakan pada beberapa aplikasi karena sudah berbentuk Javascript Function.

 

Seringkali kita menemui sebuah pilihan / opsi yang berbasis Checkbox, dimana kita disuruh memilih opsi tersebut Maximal 2, 3 dan lain - lain, Biasanya hal tersebut bisa kita temui pada situs - situs lowongan pekerjaan yang menanyakan bidang pekerjaan yang kita inginkan apa saja. Disana terdapat beberapa pilihan misalnya : Pemrograman Web, IT Officer, Staff HRD, dan lain - lain.

Bagaimana cara Membatasi pilihan pada checkbox ? Mari kita lihat contoh script sederhana yang sudah kami buat untuk pembaca Media Kreatif.

<html>
<head>
<title>Batasi Checkbox</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function limit_checkbox(max,identifier)
{
	var checkbox = $("input[name='"+identifier+"[]']");
	var checked  = $("input[name='"+identifier+"[]']:checked").length;
	checkbox.filter(':not(:checked)').prop('disabled', checked >= max);
	
}
</script>
</head>
<body>
<p>Menurut anda, bagaimana metode pembelajaran PHP yang mudah untuk diterapkan ? Pilih maximal 3</p>
<ul>
	<li><input type="checkbox"  name="check[]" value="1" onchange="limit_checkbox(3,'check');"/> Beli buku - buku lokal</li>
	<li><input type="checkbox"  name="check[]" value="2" onchange="limit_checkbox(3,'check');"/> Mencari Contoh - Contoh Aplikasi dan membongkar scriptnya</li>
	<li><input type="checkbox"  name="check[]" value="3" onchange="limit_checkbox(3,'check');"/> Mengikuti kursus PHP</li>
	<li><input type="checkbox"  name="check[]" value="4" onchange="limit_checkbox(3,'check');"/> Mengunjungi Blog-blog Gratis tentang PHP</li>
	<li><input type="checkbox"  name="check[]" value="5" onchange="limit_checkbox(3,'check');"/> Bertanya pada teman-teman Programer PHP</li>
</ul>
<p>Menurut anda, bagaimana cara bertanya yang baik ketika kita membutuhkan bantuan dalam sebuah form komentar Blog / Situs Tutorial? Pilih max 2</p>
<ul>
	<li><input type="checkbox"  name="check2[]" value="1" onchange="limit_checkbox(2,'check2');"/> Min, kok ga bisa ya?</li>
	<li><input type="checkbox"  name="check2[]" value="2" onchange="limit_checkbox(2,'check2');"/> Admin, saya mau tanya pada bagian ini kok bla bla bla dst</li>
	<li><input type="checkbox"  name="check2[]" value="3" onchange="limit_checkbox(2,'check2');"/> Min, bagi script tentang ini dong </li>
	<li><input type="checkbox"  name="check2[]" value="4" onchange="limit_checkbox(2,'check2');"/> Admin, gimana caranya kalau bla bla dst</li>
</ul>
<p>Dari mana kontribusi terbesar yang anda rasakan saat belajar Pemrograman PHP?</p>
<ul>
	<li><input type="checkbox"  name="check3[]" value="1" onchange="limit_checkbox(4,'check3');"/> Bangku kuliah</li>
	<li><input type="checkbox"  name="check3[]" value="2" onchange="limit_checkbox(4,'check3');"/> Tutorial Internet</li>
	<li><input type="checkbox"  name="check3[]" value="3" onchange="limit_checkbox(4,'check3');"/> Kursus pemrograman </li>
	<li><input type="checkbox"  name="check3[]" value="4" onchange="limit_checkbox(4,'check3');"/> Bertanya pada teman</li>
	<li><input type="checkbox"  name="check3[]" value="4" onchange="limit_checkbox(4,'check3');"/> Membeli buku - buku pemrograman PHP</li>
</ul>
</body>
</html>

Demo dari contoh diatas dapat kita lihat pada : http://jsfiddle.net/K6g7W/1/

Sekarang mari kita bahas bagian demi bagian dari script diatas. Contoh diatas

<script type="text/javascript">
function limit_checkbox(max,identifier)
{
	var checkbox = $("input[name='"+identifier+"[]']");
	var checked  = $("input[name='"+identifier+"[]']:checked").length;
	checkbox.filter(':not(:checked)').prop('disabled', checked >= max);
	
}
</script>

Function limit_checkbox merupakan function yang kita buat untuk menggunakan library Jquery dalam proses manipulasi form input. Dalam contoh diatas, kita lihat script :

  • var checkbox » Mengenali kelompok checkbox yang akan dimanipulsi berdasarkan nama. Nama dari checkbox diperoleh dari variabel identifier yang dikirimkan melalui event onchange pada halaman HTML nantinya
  • var checked » Menghitung jumlah checkbox yang sudah dicentang dari kelompok yang dimaksud sesuai dengan namanya
  • baris selanjutnya melakukan pengecekan dimana, jika jumlah yang dicentang sudah >= batas, maka checkbox lain yang belum dicentang pada kelompok tersebut akan didisable, sedangkan jika jumlah yang dicentang < batasan, maka checkbox lain yang belum dicentang akan di set enable

Beralih pada bagian HTMLnya, pada bagian HTML kita hanya perlu melihat pada sebuah event yang pada contoh diatas kita buat dengan event onchange seperti terlihat pada contoh kelompok Checkbox pertama :

<li><input type="checkbox"  name="check[]" value="1" onchange="limit_checkbox(3,'check');"/> Beli buku - buku lokal</li>

Event onchange memanggil fungsi limit_chekbox dan mengirimkan jumlah batas maximal checkbox yang bisa dipilih, serta mengirimkan nama kelompok checkbox yang akan dimanipulasi. Sehingga dari contoh diatas bisa kita logikakan sebegai berikut : Maximal checkbox yang bisa dipilih = 3, dan kelompok checkbox yang akan diproses adalah checkbox dengan nama check

 


Kelompok checkbox ke 2

<li><input type="checkbox"  name="check2[]" value="1" onchange="limit_checkbox(2,'check2');"/> Min, kok ga bisa ya?</li>

Event onchange memanggil fungsi limit_chekbox dan mengirimkan jumlah batas maximal checkbox yang bisa dipilih, serta mengirimkan nama kelompok checkbox yang akan dimanipulasi. Sehingga dari contoh diatas bisa kita logikakan sebegai berikut : Maximal checkbox yang bisa dipilih = 2, dan kelompok checkbox yang akan diproses adalah checkbox dengan nama check2

 

Begitu pula selanjutnya jika anda ingin menggunakan kelompok checkbox lainnya untuk dilakukan manipulasi dengan fungsi tersebut. Mudah - mudahan tutorial singkat ini dapat bermanfaat bagi pembaca sekalian. Support kami dengan cara Click LIKE atau SHARE jika anda merasa tutorial ini bermanfaat bagi pembaca sekalian.

 

Salam Kreatif


Komentar pembaca

reychamas ini tak jalanin kok tetep batasannya nggak bisa ya??? padahal java-nya udah ada semuaposting pada :2013-11-06 19:17:20
AdminSdr Rey, Jika memang batasannya belum bisa berjalan pada komputer anda, maka pastikan Apakah path / alamat jquery yang akan diload sudah benar, untuk melihatnya, jalankan script kemudian tekan tombol Ctrl U pada mozilla Firefox, kemudian klik pada bagian jQuery. Jika muncul pesan Not found, maka alamat jquery anda tidak ditemukan oleh scriptposting pada :2013-11-07 08:33:22
budi aman prasetyotutorial'y sangat membantu sekali,, terimah kasih atas ilmu'y siipposting pada :2015-11-16 21:22:57
adhigan , mo nanya, aku punya 4 from php, gimana cara menapilkannya sesuai dengan checkbox yg di centang posting pada :2016-05-24 20:21:56
         
     
         
 
         
   
         
   
 

Tulis komentar