Selamat Datang

Merubah fungsi Checkbox menjadi Radio Button dengan Javascript

Pada tulisan ini kita akan membahas sedikit bagaimana merubah Checkbox menjadi Radio dengan menggunakan Javascript.
checkbox
Latar belakang

Penggunaan selector :checked sudah kompatible di setiap browser. Selector ini men-select elemen input yg bertype radio atau checkbox.

Permasalahan

Akan tetapi designer mungkin akan dibuat bingung. type apakah yang akan digunakan ? apakah input bertype radio atau yang bertype checkbox.

Inspirasi

Dengan alasan bahwa jika element input ber-type radio name-nya beda-beda, maka fungsinya sama saja seperti input yang bertype checkbox.

Radio hanya berfungsi sebagai chooser tentu jika name-nya sama membentuk array key. Dilain pihak, input bertype checkbox tidak terpengaruh oleh name-nya , membentuk array value. Sebagai alternatif. maka element input=Radio bisa dengan hanya menggunakan input=checkbox saja. cukup gunakan script di bawah ini:

/* DOM */
window
  .document
  .body

/* CLICK */

.addEventListener( "click", function( event ) {
  var oTarget = event.target;

 /* FOR input[type="checkbox"] */

if( oTarget.tagName == "INPUT" && oTarget.type == "checkbox" ) {
  var chkbox = document.getElementsByTagName("INPUT"),
  i = 0;
  for( ;i < chkbox.length; i++ ) {
     if( oTarget.name == chkbox[i].name ) {
       if( chkbox[i] == oTarget ) continue;
       chkbox[i].checked = false;
     }
   }
 }

 /* --- */

}, false );

Script ini sebaiknya disimpan di body.
perlu diketahui, script ini hanya contoh.
sebaiknya gunakan script yg sesuai dengan project anda. ( misalnya: jquery )

berikut ini contoh penggunaanyya:

	<dl>
		<dt>Choose one</dt>
		<dd>
			<ul>
				<li><label><input type="checkbox" name="a" /> checkbox a</label></li>
				<li><label><input type="checkbox" name="a" /> checkbox a</label></li>
				<li><label><input type="checkbox" name="a" /> checkbox a</label></li>
			</ul>
		</dd>
		<dt>Choose any</dt>
		<dd>
			<ul>
				<li><label><input type="checkbox" name="x" /> checkbox x</label></li>
				<li><label><input type="checkbox" name="y" /> checkbox y</label></li>
				<li><label><input type="checkbox" name="z" /> checkbox z</label></li>
			</ul>
		</dd>
	</dl>
	<script>
	#Tulis script diatas disini
	</script>

DEMO

Epilog

Selamat berkreasi dengan selector :checked





Comments

4 thoughts on “Merubah fungsi Checkbox menjadi Radio Button dengan Javascript

  1. EghyR01 says:

    Terima Kasih Atas tutorialnya ..
    artikel yang sangat bagus ..

  2. sandi says:

    fungsinya kok ga jalan di browser ie…apa perlu setingan khusus supaya fungsinya bisa berjalan,,di internet explorer..untuk di mozilla dan chrome sih bisa,,thanks,,

  3. hzcho says:

    thanks.. sangat membantu

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