Bir radyo düğmesinin seçili olup olmadığını JavaScript ile nasıl kontrol edebilirim?

Şöyle bir HTML'ye sahip olduğunuzu varsayalım

<input type="radio" name="gender" id="gender_Male" value="Male" />
<input type="radio" name="gender" id="gender_Female" value="Female" />

İstemci tarafı doğrulama için, burada hangisinin seçili olduğunu kontrol etmek için bazı Javascript'ler var:

if(document.getElementById('gender_Male').checked) {
  //Male radio button is checked
}else if(document.getElementById('gender_Female').checked) {
  //Female radio button is checked
}

Yukarıdakiler, işaretlemenizin tam yapısına bağlı olarak daha verimli hale getirilebilir, ancak bu, başlamanız için yeterli olmalıdır.

Eğer sadece sayfanın herhangi bir yerinde herhangi bir radyo düğmesinin seçili olup olmadığını görmek istiyorsanız, PrototypeJS bunu çok kolaylaştırır.

Sayfanın herhangi bir yerinde en az bir radyo düğmesi seçildiğinde true değerini döndüren bir fonksiyon. Yine, özel HTML'nize bağlı olarak bunun ayarlanması gerekebilir.

function atLeastOneRadio() {
    return ($('input[type=radio]:checked').size() > 0);
}

Sunucu tarafı doğrulama için (unutmayın, doğrulama için tamamen Javascript'e güvenemezsiniz!), seçtiğiniz dile bağlı olacaktır, ancak istek dizesinin `cinsiyet' değerini kontrol edersiniz.

jQuery]1 ile, aşağıdaki gibi bir şey olurdu

if ($('input[name=gender]:checked').length > 0) {
    // do something here
}

Daha net bir şekilde ele almak için bunu parçalara ayırmama izin verin. jQuery işleri soldan sağa doğru işler.

input[name=gender]:checked

1. input giriş etiketleriyle sınırlar.
2. [name=gender] bir önceki gruptaki gender ismine sahip etiketlerle sınırlar.
3. :checked önceki grupta seçili olan onay kutuları/radyo düğmeleri ile sınırlar.

Bundan tamamen kaçınmak istiyorsanız, HTML kodunda radyo düğmelerinden birini işaretli olarak işaretleyin (checked="checked"), böylece bir radyo düğmesinin her zaman seçili olmasını sağlarsınız.

Vanilya JavaScript yöntemi

var radios = document.getElementsByTagName('input');
var value;
for (var i = 0; i < radios.length; i++) {
    if (radios[i].type === 'radio' && radios[i].checked) {
        // get value, set checked flag or do whatever you need to
        value = radios[i].value;       
    }
}