Javascript_checkbox_ve_Radio.htm

checkbox ve radio düğmeleri

Checkbox ve radio düğmeleri formlar içerisinde kullandığımız diğer elemanlardır. Bu elemanların sonuçları bir index içerisinde tutulurlar. Fakat bu sonuçlar value değerleri değildir. Çünkü bu elemanların value değerleri sabit bir yapıdadır. Sonuçları ise işaretli(true), işaretsiz(false) olarak elde edilir. Bir formun içerisindeki eleman sayısını tespit edebiliriz. Bunun için lenght metodunu kullanıyoruz. document.formAdi.lenght şeklinde bir kullanım formun içerisindeki eleman sayısını verecektir.

Yine bir checkbox veya radio elemanının indexi document.formAdi.radioAdi.lenght şeklinde bulunabilir. Böylece kaç adet radio düğmesi veya checkbox kullanıldığı bulunabilir. Yine bu index sayesinde her radio veya checkbox elemanının değeri(true/false) bulunabilir.
Mesela üç checkbox elemanından bir form oluşturalım.

<form name=deneme>
<input type=checkbox name=isim value=ahmet>
<input type=checkbox name=isim value=mehmet>
<input type=checkbox name=isim value=hasan>
</form>

deneme adlı bu formun içerisinde isim adlı bir checkbox gurubu bulunuyor. Bu gurup içerisinde ise 3 eleman bulunmaktadır. Biz form içerisindeki bu checkbox sayısını bulmak için

sayi=document.deneme.isim.lenght;

şeklinde bir kod kullanacağız. Bu şekilde bir kullanım sayi değişkenine 3 değerini aktaracaktır. Yine checkbox elemanlarının bir dizi içerisinde tutulduğunu gördük öylese bu indexin elemanları isim[0],isim[1] ve isim[2] olacaktır. Bu elemanlar ile artık işlem yapabiliriz. Yapabileceğimiz iki işlem bulunuyor bunlardan ilki her elemanın sabit olan value değerini okumak; mesela isim[0] elemanının value değerinin ahmet olduğunu biliyoruz. Birde biz bu elemanın işaretli olup olmadığını kontrol edeceğiz bunun içinde checked metodunu kullanıyoruz. Mesela isim[0] ın işaretli olup olmadığını isaretliMİ=document.deneme.isim[0].checked; yazarak bulabiliriz.

Şimdi bir örnek form üzerinde çalışalım. Formumuz yukarıda gördüğümüz deneme formu olacak. Sonuçları ise ayrıntılı olarak göreceğiz.


<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-9">
<title>textalanına değer aktarmak</title>
<script>
<!-- gizle
function goster(){
isim0value=document.deneme.isim[0].value;
isim1value=document.deneme.isim[1].value;
isim2value=document.deneme.isim[2].value;
isim0checked=document.deneme.isim[0].checked;
isim1checked=document.deneme.isim[1].checked;
isim2checked=document.deneme.isim[2].checked;
document.write("isim[0] value değeri : "+isim0value+
"<br>isim[0] checked değeri : "+isim0checked+"<p>");
document.write("isim[1] value değeri : "+isim1value+
"<br>isim[1] checked değeri : "+isim1checked+"<p>");
document.write("isim[2] value değeri : "+isim2value+
"<br>isim[2] checked değeri : "+isim2checked+"<p>");
}
// gizleme sonu -->
</script>
</head>
<body>
<form name=deneme>
<input type=checkbox name=isim value=ahmet>
<input type=checkbox name=isim value=mehmet>
<input type=checkbox name=isim value=hasan><br>
<input type=button value=tamam onClick="goster()">
</form>
</body>
</html>

 

Yardım İçin Sadece Bir Tık Yeter
 
Sponsor
 
.tk
 
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol