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
Bundan sonra Jquery, Angular, React ve Vue.JS ile ilgili örneklere devam edeceğiz.
Mutlu kodlamalar,
Oğuzhan TAŞ
Ocak 2019
Dil Değiştir(Change Language)
Kategoriler
- Csharp(58)
- Csharp Formlar(23)
- Web Tasarım(9)
- CSS(27)
- JavaScript(37)
- PHP(50)
- Laravel(3)
- ASP.net(38)
- Excel(15)
- Güvenlik(4)
- E-Ticaret(3)
- Kariyer(5)
- SQL Server(29)
- MySQL(16)
- Linux(17)
- MacOSX(8)
- Ayarlar(12)
- Bilgisayar Ağları(3)
- Symfony(1)
- Teknoloji(7)
- VBS(1)
- Arduino(6)
- RaspberryPi(1)
- Algoritmalar(15)
- HTML(3)
- Python(2)
- Bash Script(7)
- C Programlama(10)
- Flutter - Dart(11)
- Bootstrap(1)
En çok Okunan 18 Makale
- :: Excelde EĞER Fonksiyonu Kullanımı...
- :: Csharp ile Access Veritabanı Bağlan...
- :: SQL nedir, Temel SQL Komutları nele...
- :: Hangi Linux Dağıtımı?
- :: OSX İşletim Sistemine PHP, MySQL, A...
- :: Excel Hesap tablosunda EĞERSAY Fonk...
- :: PHP dilini kullanarak MySQLi tekniğ...
- :: Excel Hesap tablosunda ÇOKETOPLA Fo...
- :: Excel Hesap tablosunda ETOPLA Fonks...
- :: Excel Hesap tablosunda ÇOKEĞERSAY F...
- :: Hangi Programlama Dilini Öğrenmeliy...
- :: Mac Bilgisayarınıza Windows 7 Yükle...
- :: PHP ile Basit Dosya Yükleme
- :: C# Programlama Dili ile İlgili Örne...
- :: Excel hücrelerinde yıldız koyarak b...
- :: PHP Dili kullanarak MySQLi Tekniği ...
- :: PhpMyAdmin Şifresi Nasıl Değiştiril...
- :: Hangisi acaba, PHP mi ASP.NET mi ?