Input Optionbutton Pada Javascript

Niguru.com | Rabu, 7 Okt 2020 | Salah satu bentuk fasilitas input yang juga seringkali dipergunakan oleh penyedia layanan berbasis IT adalah input dengan menggunakan optionbutton, yaitu tombol yang tampil seperti titik berukuran besar atau seperti tombol volume pada radio manual (mungkin itu sebabnya tombol ini juga disebut sebagai radiobutton).

Berbeda dengan checkbox yang biasanya digunakan untuk suatu form digital dengan input yang memungkinkan user membatalkan pilihan, pada optionbutton biasanya terdapat suatu tombol untuk reset bila user membatalkan pilihan.

Berikut ini sintaks untuk membuat optionbutton pada HTML:

<input type="radio">

Dalam kondisi non aktif radiobutton memiliki nilai = false. Bila diaktifkan maka akan menghasilkan nilai = true.

Perhatikan pada contoh berikut ini:

<h1>Belajar Input Radiobutton</h1>

<big><big>Klik pohon yang kamu pilih</big>

<br>----------------------------<br>

<form>

<input type="radio" id="Kelapa">Kelapa<br>

<input type="radio" id="Karet">Karet<br>

<input type="radio" id="Beringin">Beringin<br>

<input type="radio" id="Kaktus">Kaktus<br>

<input type="button" value="Kirim Data" onclick="pilih(this.form)">

<input type="reset" value="Hapus"></form>

<script>

function pilih(obj){

a=obj.Kelapa.checked

b=obj.Karet.checked

c=obj.Beringin.checked

d=obj.Kaktus.checked

e="&#9658 Pohon"

document.write("<h1>Belajar Input Radiobutton</h1>")

document.write("<big>--------------------------<br>")

document.write("Kamu memilih:<br>")

if (a==true) { document.write(e," Kelapa<br>")}

if (b==true) { document.write(e," Karet<br>")}

if (c==true) { document.write(e," Beringin<br>")}

if (d==true) { document.write(e," Kaktus<br>")}

}</script>

 

Simpan dengan nama radioBtn01.html:

 

Buka file radioBtn01.html pada browser. Hasilnya:

 

Klik pada optionbutton yang dipilih > klik Kirim Data:

 

Hasilnya:

Demikianlah penjelasan mengenai cara menangani input berupa optionbutton pada aplikasi pemrograman Javascript.

Selamat mencoba .. Have a nice day :-)

www.Niguru.com (Nino Guevara Ruwano)