contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Mengambil Nilai dari Checkbox dengan Javascript

Posted in Javascript Jquery Life at 14 April 2016 With 0 Comments

Mengambil data dari komponen checkbox dengan javascript mungkin jarang ditemui dalam pemrograman web, namun admin yakin pasti di antaranya pernah ngalamin kesulitan bagaimana cara mengambil nilai di check box kan?kalo saya pernah..hehe..oleh karena itu kali ini saya akan memberikan contoh yg saya pakai untuk belajar dasar-dasarnya. Untuk yg lebih rinci pastinya data bersumber dari database. Tapi untuk contoh yang saya berikan belum memakai database. Oke langsung aja ke contoh script mengambil nilai dari checkbox. baca validasi mutlitple Checkbox

Mengambil Nilai dari Checkbox dengan Javascript

cara mengambil nilai checkbox

Code HMTL :

<!DOCTYPE html>
<html>
<head>
<script>
function displayResult(frm){   
 var selectedbuah="";
    for (i = 0; i < frm.buah.length; i++){ //menghitung jumlah panjang array
  if (frm.buah[i].checked){   
   selectedbuah += frm.buah[i].value +", ";
  }
    }
 //memunculkan data di input id result yg isinya select buah
    document.getElementById("result").value=selectedbuah;
}
function displayAlert(frm){   
 var selectedbuah="";
    for (i = 0; i < frm.buah.length; i++){   
  if (frm.buah[i].checked){   
   selectedbuah += frm.buah[i].value +", ";
  }
    }
    if (selectedbuah==""){ //jika tidak ada buah yg dipilih  
  alert("Silahkan pilih buah favoritmu !");
        form.buah[0].focus();
        return false;
    }
    else
    alert("Buah favorit kamu : " + selectedbuah);
}
</script>
</head>
<body>
<form>
<p>Pilih buah favoritmu :</p>
<input type="checkbox" name="buah" onclick="displayResult(this.form)" value="Anggur">Anggur
<input type="checkbox" name="buah" onclick="displayResult(this.form)" value="Apel">Apel
<input type="checkbox" name="buah" onclick="displayResult(this.form)" value="Semangka">Semangka
<input type="checkbox" name="buah" onclick="displayResult(this.form)" value="Durian">Durian
<input type="checkbox" name="buah" onclick="displayResult(this.form)" value="Mangga">Mangga

Buah favorit kamu : <input type="text" id="result" size="60">

<button type="button" onclick="displayAlert(this.form)">Lihat buah favoritmu</button>
</form>
</body>
</html>

OK.. Demikianlah artikel Mengambil Nilai dari Checkbox dengan Javascript, semoga artikel ini bermanfaat

▼ Download Source Code Dibawah Ini ▼


Artikel Terkait

Diskusi