Přepínač je ikona, která se používá ve formulářích k převzetí vstupu od uživatele. Umožňuje uživatelům vybrat jednu hodnotu ze skupiny přepínačů. Přepínače se v podstatě používají pro jeden výběr z více , který se většinou používá v GUI formulářích.

Mezi dvěma nebo více přepínači můžete označit/zaškrtnout pouze jeden přepínač. V této kapitole vás provedeme tím, jak zkontrolovat přepínač pomocí programovací jazyk JavaScript .

Za tímto účelem nejprve navrhneme formulář obsahující rádio tlačítka pomocí HTML a poté pomocí programování v JavaScriptu zaškrtneme přepínač. Také zkontrolujeme, která hodnota přepínače je vybrána.

Vytvořte přepínač

Následuje jednoduchý kód pro vytvoření skupiny přepínačů.

Kopírovat kód

sharwanand

Vyberte si své oblíbené roční období:

Zkontrolujte přepínač

Pro kontrolu přepínače nepotřebujeme psát žádný konkrétní kód. Lze je zkontrolovat, jakmile jsou vytvořeny nebo specifikovány ve formě HTML.

Musíme však napsat kód JavaScript, abychom získali hodnotu zaškrtnutého přepínače, což uvidíme v kapitole níže:

Zkontrolujte, zda je přepínač vybrán nebo ne

V JavaScriptu existují dva způsoby, jak zkontrolovat označený přepínač nebo určit, který přepínač je vybrán. JavaScript k tomu nabízí dvě metody DOM.

getElementById querySelector

Vlastnost input radio checked se používá ke kontrole, zda je zaškrtávací políčko zaškrtnuté nebo ne. Použití document.getElementById('id').zaškrtnuto metoda pro toto. Vrátí zaškrtnutý stav přepínače jako booleovskou hodnotu. Může být buď pravda, nebo nepravda.

Skutečný - Pokud je vybrán přepínač.

Nepravdivé - Pokud přepínač není vybrán/zaškrtnut.

Podívejte se na kód JavaScript níže, abyste věděli, jak to funguje:

Příklad

Máme například přepínač s názvem Léto a id = 'léto'. Nyní pomocí tohoto ID tlačítka zkontrolujeme, zda je přepínač označen nebo ne.

Kopírovat kód

 if(document.getElementById('summer').checked == true) { document.write('Summer radio button is selected'); } else { document.write('Summer radio button is not selected'); } 

querySelector()

Funkce querySelector() je metoda DOM JavaScriptu. Používá vlastnost společného názvu přepínačů uvnitř. Tato metoda se používá, jak je uvedeno níže, ke kontrole, který přepínač je vybrán.

 document.querySelector('input[name='JTP']:checked') 

Příklad

Například máme skupinu přepínacích tlačítek s názvem property name = 'sezóna' pro všechna tlačítka. Nyní mezi těmito tlačítky pojmenovanými sezóna zkontrolujeme, které z nich je vybráno.

Kopírovat kód

 var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.write('Radio button is selected'); } else { document.write('Nothing has been selected'); } 

Získat hodnotu zaškrtnutého přepínače:

Pomocí getElementById ()

Následuje kód pro získání hodnoty zaškrtnutého přepínače pomocí metody getElementById():

Kopírovat kód

 if(document.getElementById('summer').checked) { var selectedValue = document.getElementById('summer').value; alert('Selected Radio Button is: ' + selectedValue); } 

Použití querySelector()

Následuje kód pro získání hodnoty zaškrtnutého přepínače pomocí metody querySelector():

Kopírovat kód

 var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { alert('Selected radio button values is: ' + getSelectedValue.value); } 

Celý kód pro získání vybrané hodnoty přepínacího tlačítka

V tomto příkladu dáme všechny výše uvedené kódy dohromady, abychom vytvořili a zaškrtli přepínač. Poté také načteme hodnotu vybraného přepínače.

matematika náhodná java

Kopírovat kód

 <br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { if(document.getElementById(&apos;summer&apos;).checked) { document.getElementById(&apos;disp&apos;).innerHTML = document.getElementById(&apos;summer&apos;).value + &apos; radio button is checked&apos;; } else if(document.getElementById(&apos;winter&apos;).checked) { document.getElementById(&apos;disp&apos;).innerHTML = document.getElementById(&apos;winter&apos;).value + &apos; radio button is checked&apos;; } else if(document.getElementById(&apos;rainy&apos;).checked) { document.getElementById(&apos;disp&apos;).innerHTML = document.getElementById(&apos;rainy&apos;).value + &apos; radio button is checked&apos;; } else if(document.getElementById(&apos;autumn&apos;).checked) { document.getElementById(&apos;disp&apos;).innerHTML = document.getElementById(&apos;autumn&apos;).value + &apos; radio button is checked&apos;; } else { document.getElementById(&apos;error&apos;).innerHTML = &apos;You have not selected any season&apos;; } } 

Výstup

Když spustíte výše uvedený kód, spustí se na webu a poskytne výstup, jak je uvedeno níže:

Vyberte jedno z přepínačů a klikněte na Předložit a získejte vybranou hodnotu.

V případě, že si nevyberete žádné z ročních období a přímo kliknete na Předložit tlačítko, zobrazí se vám chybová zpráva, že - Nevybrali jste žádnou sezónu protože jsme použili ověření.

Získat hodnotu vybraného přepínače: querySelector()

Metoda DOM querySelector().

Funkce querySelector() je metoda DOM JavaScriptu. Tato metoda se používá k získání prvku, který odpovídá zadanému Selektor CSS v dokumentu. Nezapomeňte, že musíte zadat vlastnost name přepínače v kódu HTML.

ostrov java

Používá se jako document.querySelector('input[name='JTP']:checked') uvnitř kartu pro kontrolu vybrané hodnoty přepínacího tlačítka ze skupiny přepínacích tlačítek. Minimalizuje délku kódu získáním hodnoty vybraného přepínače pomocí malého řádku kódu.

 var selectedValue = document.querySelector('input[name='JTP']:checked') 

Podívejte se na níže uvedený kód, jak se bude používat s formulářem HTML:

Kopírovat kód

 <br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { var getSelectedValue = document.querySelector( &apos;input[name=&apos;season&apos;]:checked&apos;); if(getSelectedValue != null) { document.getElementById(&apos;disp&apos;).innerHTML = getSelectedValue.value + &apos; season is selected&apos;; } else { document.getElementById(&apos;error&apos;).innerHTML = &apos;*You have not selected any season&apos;; } } 

Výstup

Když spustíte výše uvedený kód, zobrazí se vám výstup na webu, jak je uvedeno níže. Odtud si vyberte své oblíbené roční období.

Když vyberete hodnotu mezi daným přepínačem a kliknete na Předložit tlačítko, získáte vybranou hodnotu na webu.

V případě, že kliknete na Předložit bez výběru některého z přepínačů, zobrazí se chybová zpráva, že - Nevybrali jste žádnou sezónu .

Takže tady vidíte, že obojí getElementById('sezóna').hodnota a document.querySelector('input[name='JTP']:checked') pracovat stejně. Oba se používají k nalezení zaškrtnuté hodnoty přepínacího tlačítka. Můžete použít kterýkoli z nich.

getElementById vs querySelector

Obě metody DOM getElementByID() a querySelector() fungují téměř stejně. Mají však také několik rozdílů, jako je výkon a velikost kódu atd. Podívejme se na nějaký rozdíl mezi nimi:

Délka kódu

Kód napsaný pomocí getElementById je o něco delší než querySelector. Pomocí metody getElementById musíme jednotlivě zkontrolovat každý přepínač, který je zaškrtnutý.

Na druhou stranu, pokud použijete metodu querySelector DOM, stačí vložit jeden řádek kódu, abyste zaškrtli označený přepínač a získali jeho hodnotu. Závěr je tedy takový, že querySelector vyžaduje méně kódu.

Výkon

Obě funkce poskytují dobrý výkon, ale vše, co potřebujete vědět, která z nich je lepší. The getElementById metoda je mnohem rychlejší než querySelector metoda. Metoda querySelector je také trochu složitá.

Hodnota používaná metodami DOM

Metoda getElementById vždy používá jedinečné id každého přepínače při kontrole označeného tlačítka a vrací první prvek odpovídající tomuto id.

Zatímco querySelector používá společné jméno (selektor) pro všechna přepínací tlačítka získá označený přepínací tlačítko a vrátí první prvek, který odpovídá zadanému selektoru.