Radio Button ile Cinsiyet Seçimi Kontrolü

Bu yazımızda  Radio Button ile Cinsiyet Seçimi Kontrolü inceleyeceğiz. Aşağıdaki kod satırı ile işaretlenmiş radyo düğmesi değerinie ulaşıyoruz. Bu işlemin sonunda "erkek" veya "kadın" dönecektir. Çünkü kodun tamamına baktığınızda aşağıdaki iki satır ile cinsiyet seçim düğmelerini oluşturuyoruz. Dikkat ederseniz iki radio nesnesinin de name yani isim değerleri aynı, ikisine de "cinsiyet" verilmiş. Radio düğmesini gruplamak için name değerlerini aynı veriyoruz, böylece kullanıcı ancak bir tanesini seçebiliyor. 

 <label><input type="radio" name="cinsiyet" value="erkek">Erkek</label> 
 <label><input type="radio" name="cinsiyet" value="kadin">Kadın</label>
 
Aşağıdaki jquery kod satırı ile seçilen değeri alıp bir değişkene aktarıyouz.
var deger= $("input[name='cinsiyet']:checked").val();

Jquery kodunun tamamı aşağıdadır. "Seçileni Göster" değerini verdiğimiz butona tıklayınca   $("input[type='button']").click() fonksiyonu tetiklenecek ve ekrana alert() fonksiyonu ile seçilen değeri yazacak. 

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Cinsiyet Seçimi </title>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
 
<script type="text/javascript">
    $(document).ready(function(){
        $("input[type='button']").click(function(){
        var deger= $("input[name='cinsiyet']:checked").val();
            if(deger){
                alert("Cinsiyetiniz: " + deger);
            }
        });
        
    });
</script>
</head> 
<body>
    <h4>Cinsiyet Seçiniz</h4>
    <p> 
        <label><input type="radio" name="cinsiyet" value="erkek">Erkek</label> 
        <label><input type="radio" name="cinsiyet" value="kadin">Kadın</label>
    </p>
    <p><input type="button" value="Seçileni Göster"></p>
</body>
</html>                            

Bundan sonra Jquery, Angular, React ve Vue.JS ile ilgili örneklere devam edeceğiz.

Mutlu kodlamalar,
Oğuzhan TAŞ
Ocak 2019
Bookmark and Share