Ako môžem pomocou JavaScriptu skontrolovať, či je vybrané rádiové tlačidlo?

Predstierajme, že máte HTML takto

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

Pre validáciu na strane klienta je tu'nejaký Javascript na kontrolu, ktorý je vybraný:

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

Uvedené by sa dalo zefektívniť v závislosti od presnej povahy vášho značenia, ale pre začiatok by to malo stačiť.

Ak chcete len zistiť, či je kdekoľvek na stránke vybrané akékoľvek rádiové tlačidlo, PrototypeJS to veľmi uľahčuje.

Tu'je funkcia, ktorá vráti true, ak je niekde na stránke vybrané aspoň jedno rádiové tlačidlo. Opäť môže byť potrebné túto funkciu upraviť v závislosti od vášho konkrétneho HTML.

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

Pri validácii na strane servera (nezabudnite, že pri validácii nemôžete byť úplne závislí na Javascripte!) by to záviselo od zvoleného jazyka, ale vy by ste kontrolovali hodnotu gender v reťazci požiadavky.

S jQuery by to bolo niečo ako

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

Rozdelím to na časti, aby to bolo prehľadnejšie. JQuery spracováva veci zľava doprava.

input[name=gender]:checked

1. input obmedzuje na vstupné značky.
2. [name=gender] obmedzuje na tagy s názvom gender v rámci predchádzajúcej skupiny.
3. :checked obmedzuje ho na zaškrtávacie políčka/rádiové tlačidlá, ktoré sú označené v rámci predchádzajúcej skupiny.

Ak sa tomu chcete úplne vyhnúť, označte v kóde HTML jedno z rádiových tlačidiel ako označené (checked="checked"), čo zaručí, že jedno rádiové tlačidlo bude vždy vybrané.

Vanilkový spôsob JavaScriptu

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