JavaScript İle Seçili CheckBox’ların Değerlerini Almak

Bir web sayfasında kimi zaman kullanıcılara birden fazla seçenek sunabilirsiniz. Bunun için checkbox ya da seçim kutularını kullanabilirsiniz. Bu seçim kutularından hangilerinin seçildiğini javascript ile tespit edebilirsiniz. Bunu nasıl yapacağınız aşağıda gösterilmektedir.

İlk olarak sayfaya 3 adet checkbox ve 1 adet buton ekliyorum. Ve yanlarına çeşitli meslek isimlerini yazıyorum. Aşağıdaki kodu dikkatli incelerseniz her seçim kutusu için name etiketi “meslek” olarak belirlenmiş. JavaScript ile nesneleri seçerken bu işimize yarayacaktır.

Ardından bu seçim kutularını yakalamak için javascript kodlarını yazmaya başlıyorum. İlk olarak javascript kodlarını içerecek olan fonksiyonu yazıyorum.

 

Yukarıda belirttiğim gibi name etiketi “meslek” olan tüm nesneleri bir diziye atıyorum.

Name alanı “meslek” olan tüm nesneler, tanımlamış olduğumuz nesneler değişkenine atanıyor. Javascript tipini “var” olarak belirlediğimiz için atanan nesne ne ise onun tipine dönüştürüyor. Burada nesneler değişkenimiz otomatik olarak bir dizi olmaktadır.

Ardından bu dizi içerisinde for döngüsü ile teker teker seçili olan seçim kutularının değerlerini alacağız.

Yukarıda bir for döngüsü oluşturduk. “nesneler.length” diyerek nesneler dizisinin uzunluğu kadar; yani örneğimize göre 3 kere döndürüyoruz. Her dönüşte sırası gelen nesnenin seçili olup olmadığını aşağıdaki gibi kontrol edeceğiz.

nesneler[i] diyerek sırası gelen nesneyi kontrol ediyoruz. Eğer sırası gelen nesne seçiliyse (checked) id değerini consola veya mesaj kutusuna yazdırabiliriz.

Ardından butona tıklandığında hazırladığımız fonksiyonun çalışmasını sağlayan jQuery kodunu yazıyoruz.

Son olarak kodumuzun tamamı aşağıdaki gibi olacaktır.

Örneği jsfiddle üzerinde inceleyebilirsiniz.

http://jsfiddle.net/airsakarya/d23yhxgk/5/

2 Comments

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak.