Buscar

Mengambil Nilai dari Checkbox di Javascript

Pagi menjelang siang teman,
Programmer se-indonesia pernah ngalamin kesulitan bagaimana cara mengambil nilai di check box gak?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 yu ke contoh script mengambil nilai dari checkbox.
<!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<br>
<input type="checkbox" name="buah" onclick="displayResult(this.form)" value="Apel">Apel<br>
<input type="checkbox" name="buah" onclick="displayResult(this.form)" value="Semangka">Semangka<br>
<input type="checkbox" name="buah" onclick="displayResult(this.form)" value="Durian">Durian<br>
<input type="checkbox" name="buah" onclick="displayResult(this.form)" value="Mangga">Mangga<br><br>
Buah favorit kamu : <input type="text" id="result" size="60"><br>
<button type="button" onclick="displayAlert(this.form)">Lihat buah favoritmu</button>
</form>
</body>
</html>
Mohon maaf ya masih banyak kekurangan, maklum masih belajar. Selebihnya bisa teman-teman modif sendiri :)
Selamat mencoba, semoga bermanfaat :)

1 comments:

chungky bar

terima kasih untuk checkboxnya sangat bermanfaat

Posting Komentar