Tutorial Web Design

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

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>

Epilog

Selamat berkreasi dengan selector :checked