Javascript ile RadioButton Kullanımı

Web projelerinde genel olarak kullandığımız bir component olan radiobuttonların bir de javascript ile nasıl kullanıldığına bakıp küçük bir örnek ile konuyu pekiştirmeyi düşünüyorum.

İlk olarak bir html sayfası oluşturalım ve içine dört adet radiobutton ekleyelim.

Burada radio buttonlarımızın name alanlarına aynı isimleri vermemiz sayesinde gruplama özelliğini kullanabiliyoruz. Yani bir radio butonu seçip daha sonra başka bir radio butonu seçtiğimizde iki adet seçim yerine son seçtiğimiz seçili görünecektir.

Madem sayfamıza Quiz adını verdik ve dört tane radiobutton koyduk o zaman verilen cevabın doğru olup olmadığını da kontrol etmemiz gerekiyor. Bunun içinde verilen cevabı onaylayacak bir butona ihtiyacımız var.

Bunun için sayfamıza bir adet buton ekleyelim. Adı Submit olsun ve basıldığında cevabı kontrol etsin bize de cevabın doğru olup olmadığını söylesin. Form kullandığımız ve submit buton kullanacağımız için formumuzdaki onsubmit'e sayfa submit olduğunda çalışacak olan javascript function'ımızın adını belirtmemiz de gerekecek.

Kısaca toparlarsak şu anda sayfamıza ekleyeceğimiz işlemler ;

1. Cevabı kontrol edecek ve bize cevabın doğru olup olmadığını gösterecek bir javascript fonksiyonu eklemek
2. Formun içine bir adet tipi submit olan buton eklemek
3. Form onsubmit işlemine yazacağımız javascript fonksiyonunu belirtmek
4. Form'umuza bir adet id tanımlamak (cevapları kontrol edeceğimiz zaman,  verilen cevabın doğru cevap olup olmadığını belirlememizi sağlayacak)
5. Son olarak da ilk radio butonumuzu seçili yapmak ki hiç bir cevap verilmemesi durumunu ortadan kaldıralım

Kodlarımız bu şekilde bir de ekranımıza bakalım.

Ekranı ilk açtığınızda hiç bir şık seçili gelmeyecektir. Bunun için seçili olmasını istediğiniz radio butonun içine checked ="true" demeniz yeterli olacaktır.

Kendinize iyi bakın.