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í:
LétoZima
Deštivý
Podzim
Otestujte to hned
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.
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('summer').checked) { document.getElementById('disp').innerHTML = document.getElementById('summer').value + ' radio button is checked'; } else if(document.getElementById('winter').checked) { document.getElementById('disp').innerHTML = document.getElementById('winter').value + ' radio button is checked'; } else if(document.getElementById('rainy').checked) { document.getElementById('disp').innerHTML = document.getElementById('rainy').value + ' radio button is checked'; } else if(document.getElementById('autumn').checked) { document.getElementById('disp').innerHTML = document.getElementById('autumn').value + ' radio button is checked'; } else { document.getElementById('error').innerHTML = 'You have not selected any season'; } } Otestujte to hned 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( 'input[name='season']:checked'); if(getSelectedValue != null) { document.getElementById('disp').innerHTML = getSelectedValue.value + ' season is selected'; } else { document.getElementById('error').innerHTML = '*You have not selected any season'; } } Otestujte to hned 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.