Prepínač je ikona, ktorá sa používa vo formulároch na získanie vstupu od používateľa. Umožňuje používateľom vybrať jednu hodnotu zo skupiny prepínačov. Prepínače sa v podstate používajú na jeden výber z viacerých , ktorý sa väčšinou používa vo formulároch GUI.
Medzi dvoma alebo viacerými prepínačmi môžete označiť/zaškrtnúť iba jeden prepínač. V tejto kapitole vás prevedieme, ako skontrolovať prepínač pomocou JavaScript programovací jazyk .
Na tento účel najprv navrhneme formulár obsahujúci rádio tlačidlá pomocou HTML a potom použijeme programovanie JavaScript na začiarknutie prepínača. Tiež skontrolujeme, ktorá hodnota prepínača je vybratá.
Vytvorte prepínač
Nasleduje jednoduchý kód na vytvorenie skupiny prepínačov.
Kopírovať kód
štvrťroky v roku
Vyberte si svoju obľúbenú sezónu:
LetoZima
Daždivé
jeseň
Vyskúšajte to
Skontrolujte prepínač
Na kontrolu prepínača nemusíme písať žiadny špecifický kód. Po vytvorení alebo zadaní vo forme HTML ich možno skontrolovať.
Musíme však napísať kód JavaScript, aby sme získali hodnotu začiarknutého prepínača, ktorý uvidíme v kapitole nižšie:
Skontrolujte, či je prepínač vybratý alebo nie
V JavaScripte existujú dva spôsoby, ako skontrolovať označený prepínač alebo identifikovať, ktorý prepínač je vybratý. JavaScript na to ponúka dve metódy DOM.
Vlastnosť input radio checked sa používa na kontrolu, či je začiarkavacie políčko začiarknuté alebo nie. Použite document.getElementById('id').skontrolované metóda na to. Vráti kontrolovaný stav prepínača ako boolovskú hodnotu. Môže to byť pravda alebo nepravda.
pravda - Ak je vybraté prepínač.
nepravda - Ak prepínač nie je vybratý/zaškrtnutý.
Pozrite si kód JavaScript nižšie, aby ste vedeli, ako to funguje:
Príklad
Napríklad máme prepínač s názvom Summer a id = 'leto'. Teraz pomocou tohto ID tlačidla skontrolujeme, či je prepínač označený alebo nie.
Kopírovať 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()
Funkcia querySelector() je metóda DOM JavaScriptu. Používa spoločnú vlastnosť názvu prepínačov vo vnútri. Táto metóda sa používa, ako je uvedené nižšie, na kontrolu, ktorý prepínač je vybratý.
nahradiť reťazec java
document.querySelector('input[name='JTP']:checked')
Príklad
Napríklad máme skupinu prepínačov s názvom property name = 'sezóna' pre všetky tlačidlá. Teraz medzi týmito tlačidlami s názvom sezóna skontrolujeme, ktoré z nich je vybraté.
Kopírovať 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ískať hodnotu začiarknutého prepínača:
Použitie getElementById ()
Nasleduje kód na získanie hodnoty začiarknutého prepínača pomocou metódy getElementById():
Kopírovať kód
if(document.getElementById('summer').checked) { var selectedValue = document.getElementById('summer').value; alert('Selected Radio Button is: ' + selectedValue); } Použitie querySelector()
Nasleduje kód na získanie hodnoty začiarknutého prepínača pomocou metódy querySelector():
Kopírovať kód
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { alert('Selected radio button values is: ' + getSelectedValue.value); } Celý kód na získanie vybranej hodnoty prepínača
V tomto príklade spojíme všetky vyššie uvedené kódy a vytvoríme a začiarkneme prepínač. Potom získame aj hodnotu vybratého prepínača.
Kopírovať 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'; } } Vyskúšajte to Výkon
Keď spustíte vyššie uvedený kód, spustí sa na webe a poskytne výstup, ako je uvedené nižšie:
Vyberte jedno z prepínačov a kliknite na Predložiť a získajte zvolenú hodnotu.
V prípade, že si nevyberiete žiadne z ročných období a priamo kliknete na Predložiť tlačidlo, zobrazí sa vám chybové hlásenie, že - Nevybrali ste žiadnu sezónu pretože sme použili overenie.
Získať hodnotu vybratého prepínača: querySelector()
Metóda DOM querySelector().
Funkcia querySelector() je metóda DOM JavaScriptu. Táto metóda sa používa na získanie prvku, ktorý sa zhoduje so zadaným Selektor CSS v dokumente. Nezabudnite, že musíte zadať vlastnosť názvu prepínača v kóde HTML.
Používa sa ako document.querySelector('input[name='JTP']:checked') vnútri kartu pre kontrolu vybranej hodnoty prepínača zo skupiny prepínačov. Minimalizuje dĺžku kódu získaním hodnoty vybraného prepínača pomocou malého riadku kódu.
var selectedValue = document.querySelector('input[name='JTP']:checked')
Pozrite si nižšie uvedený kód, ako sa bude používať s formulárom HTML:
Kopírovať 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'; } } Vyskúšajte to Výkon
Keď spustíte vyššie uvedený kód, zobrazí sa vám výstup na webe, ako je uvedené nižšie. Tu si vyberte svoje obľúbené ročné obdobie.
Keď vyberiete hodnotu medzi daným prepínačom a kliknete na Predložiť tlačidlom, získate zvolenú hodnotu na webe.
V prípade, že kliknete na Predložiť bez výberu niektorého z prepínačov, zobrazí sa vám chybové hlásenie, že - Nevybrali ste žiadnu sezónu .
faktoriál v c
Takže tu môžete vidieť oboje getElementById('season').value a document.querySelector('input[name='JTP']:checked') pracovať rovnako. Obidva sa používajú na nájdenie hodnoty začiarknutého prepínača. Môžete použiť ktorýkoľvek z nich.
getElementById vs querySelector
Obe metódy DOM getElementByID() a querySelector() fungujú takmer rovnako. Majú však aj niekoľko rozdielov, ako je výkon a veľkosť kódu atď. Pozrime sa na nejaký rozdiel medzi nimi:
Dĺžka kódu
Kód napísaný pomocou getElementById je o niečo dlhší ako querySelector. Pomocou metódy getElementById musíme skontrolovať každý prepínač jednotlivo, ktorý z nich je začiarknutý.
Na druhej strane, ak použijete metódu querySelector DOM, stačí vložiť jeden riadok kódu, aby ste skontrolovali označený prepínač a získali jeho hodnotu. Záver je teda taký, že querySelector vyžaduje menej kódu.
Výkon
Obe funkcie poskytujú dobrý výkon, ale všetko, čo potrebujete vedieť, ktorá z nich je lepšia. The getElementById metóda je oveľa rýchlejšia ako querySelector metóda. Metóda querySelector je tiež trochu zložitá.
Hodnota používaná metódami DOM
Metóda getElementById vždy používa jedinečné ID každého prepínača pri kontrole označeného tlačidla a vráti prvý prvok, ktorý sa zhoduje s ID.
Zatiaľ čo querySelector používa spoločné meno (selektor) pre všetky prepínače získate označený prepínač a vráti prvý prvok, ktorý sa zhoduje so zadaným selektorom.