Jak mogę sprawdzić czy przycisk radiowy jest zaznaczony za pomocą JavaScript?

Udawajmy, że masz taki HTML

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

Dla walidacji po stronie klienta, tutaj'jest trochę Javascript do sprawdzenia, który z nich jest wybrany:

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

Powyższe może być bardziej wydajne w zależności od dokładnej natury twojego markupu, ale to powinno wystarczyć, abyś mógł zacząć.

Jeśli chcesz po prostu sprawdzić, czy jakikolwiek przycisk radiowy jest wybrany gdziekolwiek na stronie, PrototypeJS bardzo to ułatwia.

Oto funkcja, która zwróci wartość true, jeśli przynajmniej jeden przycisk radiowy jest zaznaczony gdzieś na stronie. Ponownie, może to wymagać dostosowania w zależności od Twojego specyficznego HTML.

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

W przypadku walidacji po stronie serwera (pamiętaj, nie możesz'polegać całkowicie na Javascript do walidacji!), będzie to zależało od wybranego języka, ale sprawdzisz wartość gender w łańcuchu żądania.

Z jQuery, to'by było coś jak

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

Pozwól mi rozbić to na kawałki, aby objąć to bardziej wyraźnie. jQuery przetwarza rzeczy od lewej do prawej.

input[name=gender]:checked

1. input ogranicza go do znaczników wejściowych.
2. [name=gender] ogranicza go do tagów o nazwie płeć w obrębie poprzedniej grupy.
3. :checked ogranicza go do checkboxów/przycisków radiowych, które są zaznaczone w poprzedniej grupie.

Jeśli chcesz tego uniknąć, zaznacz jeden z przycisków radiowych jako zaznaczony (checked="checked") w kodzie HTML, co zagwarantuje, że jeden przycisk radiowy będzie zawsze zaznaczony.

Sposób na waniliowy JavaScript

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;       
    }
}