Radyo düğmesi, formlarda kullanıcıdan girdi almak için kullanılan bir simgedir. Kullanıcıların radyo düğmeleri grubundan bir değer seçmesine olanak tanır. Radyo düğmeleri temel olarak aşağıdakiler için kullanılır: birden fazla arasından tek seçim Çoğunlukla GUI formlarında kullanılır.
İki veya daha fazla radyo düğmesi arasında yalnızca bir radyo düğmesini işaretleyebilir/kontrol edebilirsiniz. Bu bölümde, bir radyo düğmesinin nasıl kontrol edileceği konusunda size rehberlik edeceğiz. JavaScript programlama dili .
Bunun için öncelikle radyo içeren bir form tasarlıyoruz. düğmeler HTML kullanarak ve ardından radyo düğmesini kontrol etmek için JavaScript programlamayı kullanacağız. Ayrıca hangi radyo düğmesi değerinin seçildiğini de kontrol edeceğiz.
Radyo düğmesi oluşturma
Aşağıda bir grup radyo düğmesi oluşturmaya yönelik basit bir kod verilmiştir.
Kodu Kopyala
25 c'den k'ye
Favori sezonunuzu seçin:
YazKış
Yağmurlu
Sonbahar
Şimdi Test Edin
Bir radyo düğmesini kontrol edin
Radyo düğmesini kontrol etmek için özel bir kod yazmamıza gerek yok. Oluşturulduklarında veya HTML biçiminde belirtildiklerinde kontrol edilebilirler.
Ancak aşağıdaki bölümde göreceğimiz işaretli radyo düğmesinin değerini almak için JavaScript kodunu yazmamız gerekiyor:
Radyo düğmesinin seçilip seçilmediğini kontrol edin
İşaretli radyo düğmesini kontrol etmenin veya hangi radyo düğmesinin seçildiğini tanımlamanın JavaScript'te iki yolu vardır. JavaScript bunun için iki DOM yöntemi sunar.
Giriş radyosunun işaretli özelliği, onay kutusunun seçilip seçilmediğini kontrol etmek için kullanılır. Kullanmak document.getElementById('id').checked bunun için yöntem. Radyo düğmesinin kontrol edilen durumunu bir Boolean değeri olarak döndürecektir. Doğru ya da yanlış olabilir.
Doğru - Radyo düğmesi seçilirse.
YANLIŞ - Radyo düğmesi seçilmediyse/işaretlenmediyse.
Nasıl çalıştığını öğrenmek için aşağıdaki JavaScript koduna bakın:
Örnek
Örneğin, Summer adında bir radyo düğmemiz var ve id = 'yaz'. Şimdi bu düğme kimliğini kullanarak radyo düğmesinin işaretlenip işaretlenmediğini kontrol edeceğiz.
Kodu Kopyala
if(document.getElementById('summer').checked == true) { document.write('Summer radio button is selected'); } else { document.write('Summer radio button is not selected'); } sorguSelektör()
querySelector() işlevi, JavaScript'in bir DOM yöntemidir. İçerisindeki radyo düğmelerinin ortak ad özelliğini kullanır. Bu yöntem, hangi radyo düğmesinin seçildiğini kontrol etmek için aşağıda verildiği gibi kullanılır.
document.querySelector('input[name='JTP']:checked')
Örnek
Örneğin, tüm düğmeler için name = 'season' name özelliğine sahip bir grup radyo düğmemiz var. Şimdi sezon isimli bu butonlar arasından hangisinin seçildiğini kontrol edeceğiz.
Kodu Kopyala
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.write('Radio button is selected'); } else { document.write('Nothing has been selected'); } İşaretlenen radyo düğmesinin değerini alın:
getElementById()'ı kullanma
getElementById() yöntemini kullanarak işaretlenen radyo düğmesinin değerini almak için kullanılan kod aşağıdadır:
Kodu Kopyala
if(document.getElementById('summer').checked) { var selectedValue = document.getElementById('summer').value; alert('Selected Radio Button is: ' + selectedValue); } querySelector()'ı kullanma
querySelector() yöntemini kullanarak işaretlenen radyo düğmesinin değerini almak için kullanılan kod aşağıdadır:
Kodu Kopyala
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { alert('Selected radio button values is: ' + getSelectedValue.value); } Seçilen radyo düğmesi değerini almak için tam kod
Bu örnekte, bir radyo düğmesi oluşturmak ve kontrol etmek için yukarıdaki kodun tümünü bir araya getireceğiz. Bundan sonra seçilen radyo düğmesinin değerini de getireceğiz.
Kodu Kopyala
<br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { if(document.getElementById('summer').checked) { document.getElementById('disp').innerHTML = document.getElementById('summer').value + ' radio button is checked'; } else if(document.getElementById('winter').checked) { document.getElementById('disp').innerHTML = document.getElementById('winter').value + ' radio button is checked'; } else if(document.getElementById('rainy').checked) { document.getElementById('disp').innerHTML = document.getElementById('rainy').value + ' radio button is checked'; } else if(document.getElementById('autumn').checked) { document.getElementById('disp').innerHTML = document.getElementById('autumn').value + ' radio button is checked'; } else { document.getElementById('error').innerHTML = 'You have not selected any season'; } } Şimdi Test Edin Çıktı
Yukarıdaki kodu çalıştırdığınızda web üzerinde çalışacak ve aşağıdaki gibi çıktı verecektir:
Radyo düğmelerinden birini seçin ve Göndermek düğmesine basın ve seçilen değeri alın.
java dizesi ekle
Mevsimlerden herhangi birini seçmemeniz ve doğrudan Göndermek düğmesine bastığınızda size bir hata mesajı gösterecektir: Herhangi bir sezon seçmediniz çünkü doğrulamayı kullandık.
Seçilen radyo düğmesinin değerini alın: querySelector()
DOM querySelector() yöntemi
querySelector() işlevi, JavaScript'in bir DOM yöntemidir. Bu yöntem belirtilenle eşleşen öğeyi elde etmek için kullanılır. CSS seçici belgede. HTML kodunda radyo düğmesinin name özelliğini belirtmeniz gerektiğini unutmayın.
Olarak kullanılır document.querySelector('input[name='JTP']:checked') içinde Radyo düğmeleri grubundan seçilen radyo düğmesi değerini kontrol etmek için sekme. Küçük bir kod satırı kullanarak seçilen radyo düğmesinin değerini alarak kodun uzunluğunu en aza indirir.
var selectedValue = document.querySelector('input[name='JTP']:checked')
Aşağıdaki koda HTML formuyla nasıl kullanılacağına bakın:
Kodu Kopyala
<br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.getElementById('disp').innerHTML = getSelectedValue.value + ' season is selected'; } else { document.getElementById('error').innerHTML = '*You have not selected any season'; } } Şimdi Test Edin Çıktı
Yukarıdaki kodu çalıştırdığınızda size aşağıdaki gibi web çıktısını gösterecektir. Buradan favori mevsiminizi seçin.
Verilen radyo düğmesi arasında bir değer seçtiğinizde ve Göndermek düğmesine bastığınızda, seçilen değeri web'de alacaksınız.
Java dize biçimi uzun
seçeneğine tıklamanız durumunda Göndermek Herhangi bir radyo düğmesini seçmeden düğmeyi tıkladığınızda size bir hata mesajı gösterilecektir: Herhangi bir sezon seçmediniz .
Yani burada her ikisini de görebilirsiniz getElementById('sezon').value Ve document.querySelector('input[name='JTP']:checked') aynı şekilde çalışın. Her ikisi de kontrol edilen radyo düğmesi değerini bulmak için kullanılır. Bunlardan herhangi birini kullanabilirsiniz.
getElementById ve querySelector karşılaştırması
DOM yöntemlerinin her ikisi de getElementByID() ve querySelector() neredeyse aynı şekilde çalışır. Ancak performans ve kod boyutu gibi bazı farklılıkları da vardır. Şimdi aralarındaki bazı farkları görelim:
Kodun uzunluğu
getElementById ile yazılan kod, querySelector'dan biraz daha uzundur. getElementById yöntemini kullanarak, her radyo düğmesinin hangisinin işaretlendiğini ayrı ayrı kontrol etmemiz gerekir.
Öte yandan, querySelector DOM yöntemini kullanırsanız, işaretlenmiş radyo düğmesini kontrol etmek ve değerini almak için tek bir kod satırı girmeniz yeterlidir. Dolayısıyla sonuç olarak querySelector'ın daha az kod gerektirmesidir.
Verim
Her iki işlev de iyi performans sağlar ancak hangisinin daha iyi olduğunu bilmeniz yeterlidir. getElementById yönteme göre çok daha hızlıdır. sorguSeçici yöntem. querySelector yöntemi de biraz karmaşıktır.
DOM yöntemleri tarafından kullanılan değer
getElementById yöntemi, işaretli düğmeyi kontrol ederken her zaman her radyo düğmesinin benzersiz kimliğini kullanır ve kimlikle eşleşen ilk öğeyi döndürür.
Oysa querySelector ortak bir ad (seçici) tüm radyo düğmelerinin işaretlenmiş radyo düğmesini almasını ve belirtilen seçiciyle eşleşen ilk öğeyi döndürmesini sağlar.