Hodnota vybraného radio inputu

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();

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Zapamatování formulářových polí

Automatické zapamatování formulářů

Při vyplňování delších formulářů se je hodí obsah průběžně ukládat. Jak na to?

AJAX upload souborů

Upload souborů bez obnovení stránky

Jak vytvořit ajaxové nahrávání souborů na server bez obnovení stránky.

Plynulý přesun focusu

Plynulý přesun focusu

Plynulé přesouvání focusu mezi jednotlivými položkami formuláře.

Zvyšování hodnoty inputů

Zvyšování hodnoty inputů

Jak zpříjemnit zadávání číselných hodnot nebo času do <input>ů tlačítky plus a mínus.

Duplikování položek formuláře v JS

Přidání dalšího textového pole

Jak umožnit kopírování/přidávání dalších textových polí do formuláře.

Komentáře