jQuery Dersleri

jQuery Checkbox Kontrolü Yapma

jQuery kontrol yapısı input ve textarea için oldukça kolaydır. Fakat checkbox tipi için bu o kadar da kolay değildir. Çünkü bu tipi kontrol etmek için bir seçici kullanılmaktadır.

Checkbox seçimleri :checked ile kontrol edilmektedir. Bu kullanımla birlikte tanımlanan etiketin seçilip seçilmediği True yada False olarak kontrol edilir. Bu kontrolün yanı sıra bir de kaç adet seçilmiş kontrolü de yapılmaktadır. Bunun içi yine :checked kullanılır fakat zincirleme olarak length ile seçimler sayılır. Seçimleri saymak, zorunlu alanlarda yada sınırlı sayıda seçim yapılacak alanlarda kullanılır.

<form action="javascript:void(0)">
   <input type=checkbox name='cbox[]' /> Kitap
   <input type=checkbox name='cbox[]' /> Araba
   <input type=checkbox name='cbox[]' /> Ev
   <button onclick="kontrol()">Yolla</button>
</form>

<script>
function kontrol(){
   if( $("[name='cbox[]']").is(":checked") ){
      alert("Seçilmiş");
   }else{
      alert("Seçilmemiş");
   }
}
</script>

Yukarıda yer alan örnekte tanımlanan checkbox seçeneklerin seçilip seçilmediği kontrol edilmektedir. Hiçbir ifade seçilmeden Yolla butonuna basıldığında, Seçilmemiş yazısı alert ile yazdırılacaktır. Eğer bir yada birden fazla seçim yapılırsa yine alert aracılığıyla Seçilmiş olarak ekrana yazdırılacaktır. Bu kulanım seçilmiş yada seçilmemiş olarak sadeleştirilmiştir.

Yapılan seçimlerden en az bir tane seçmeniz gerekiyor yada en fazla beş tane seçebilirsiniz gibi bir ifade kullanmak için length ifadesi kullanılmalıdır. Yukarda hazırlanan kodları bu örneğe uyarlayalım.

<form action="javascript:void(0)">
   <input type=checkbox name='cbox[]' /> Kitap
   <input type=checkbox name='cbox[]' /> Araba
   <input type=checkbox name='cbox[]' /> Ev
   <button onclick="kontrol()">Yolla</button>
</form>

<script>
function kontrol(){
   var kacAdet = $("[name='cbox[]']:checked").length;
   // Kontrol
   if( kacAdet == "0" ){
      alert("En az 1 tane seçmelisiniz");
   }else{
      if( kacAdet >= 3 ){
         alert("En fazla 2 tane seçebilirsiniz.");
      }else{
         // Kontrol sonrası yapılacak işlemler
         alert("işlem başarılı");
      }
   }
}
</script>

Yukarıda yer alan kodlarla birlikte seçim adetine göre işlem yapabilirsiniz. Seçim adeti bilgisi ile seçilip seçilmediğini de bir nevi kontrol etmiş oluyorsunuz. Bu iki örnekte kullanım alanlarına göre farklılıklar göstermektedir.

Daha Fazla Göster

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Kapalı