Při vytváření formulářů se v případě, že má návštěvník volit jednu z několika možností, hodí použít <input type="radio">.

Vytvoření skupiny políček, aby šlo vždy vybrat pouze jedno, se docílí použitím stejného názvu (name). Hodnota políčka se potom uvádí do atributu value.

Častou chybou při používání radio přepínačů je absence značky <label>, kterou jde umožnit vybrání možnosti i kliknutím na popisek.

Zjištění hodnoty JavaScriptem

Zjistit hodnotu vybrané položky není úplně snadné jako u obyčejné textové položky, kde je text políčka ve vlastnosti value.

Nezbývá než všechna radia projít cyklem, který vrátí hodnotu prvního a jediného vybraného přepínače (že je <input> zaškrtnutý se pozná z vlastnosti checked):

function radioValue(radioCollection) {
  for (var i = radioCollection.length - 1; i >= 0; i--) {
    if (radioCollection[i].checked) {
      return radioCollection[i].value;
    }
  }
  return false;
}

Této funkci stačí předat kolekci radio prvků.

var hodnota = radioValue(
  document.jmenoFormulare.nazevRadioPolicek
);

Použití querySelectoru

Metoda querySelector nabízí jinou možnost bez použití cyklu, jak z vybraného přepínače získat jeho hodnotu. Selektor :checked limituje funkčnost na IE 9 a novější.

document.querySelector(
  'input[name="nazevRadioPolicek"]:checked'
).value;

Hodnota vybraného radia v jQuery

V jQuery se dá použít obdobný postup jako s querySelectorem i ve starších IE.

$(
  'input[name=nazevRadioPolicek]:checked'
).val();