Izbirni gumb je ikona, ki se uporablja v obrazcih za sprejemanje vnosa od uporabnika. Uporabnikom omogoča izbiro ene vrednosti iz skupine radijskih gumbov. Izbirni gumbi se v bistvu uporabljajo za en sam izbor izmed večih , ki se večinoma uporablja v obrazcih GUI.
Označite/obkljukate lahko le en izbirni gumb med dvema ali več izbirnimi gumbi. V tem poglavju vas bomo vodili, kako preveriti izbirni gumb z uporabo programski jezik JavaScript .
Za to najprej oblikujemo obrazec, ki vsebuje radio gumbi z uporabo HTML , nato pa bomo uporabili programiranje JavaScript za preverjanje izbirnega gumba. Preverili bomo tudi, katera vrednost izbirnega gumba je izbrana.
Ustvari izbirni gumb
Sledi preprosta koda za ustvarjanje skupine radijskih gumbov.
Kopiraj kodo
niz v c++
Izberite svojo najljubšo sezono:
poletjezima
deževno
Jesen
Preizkusite zdaj
Preverite izbirni gumb
Za preverjanje izbirnega gumba nam ni treba napisati nobene posebne kode. Lahko jih preverite, ko so ustvarjeni ali navedeni v obliki HTML.
Vendar pa moramo napisati kodo JavaScript, da dobimo vrednost označenega izbirnega gumba, kar bomo videli v spodnjem poglavju:
Preverite, ali je izbirni gumb izbran ali ne
V JavaScriptu obstajata dva načina za preverjanje označenega izbirnega gumba ali ugotavljanje, kateri izbirni gumb je izbran. JavaScript za to ponuja dve metodi DOM.
Lastnost input radio checked se uporablja za preverjanje, ali je potrditveno polje izbrano ali ne. Uporaba document.getElementById('id').preverjeno metoda za to. Preverjeno stanje izbirnega gumba bo vrnilo kot logično vrednost. Lahko je resnična ali napačna.
Prav - Če je izbran izbirni gumb.
False - Če izbirni gumb ni izbran/preverjen.
Oglejte si spodnjo kodo JavaScript, če želite izvedeti, kako deluje:
Primer
Na primer, imamo izbirni gumb z imenom Poletje in id = 'poletje'. Zdaj bomo s tem ID-jem gumba preverili, ali je izbirni gumb označen ali ne.
Kopiraj kodo
if(document.getElementById('summer').checked == true) { document.write('Summer radio button is selected'); } else { document.write('Summer radio button is not selected'); } querySelector()
Funkcija querySelector() je metoda DOM JavaScripta. Uporablja lastnost skupnega imena izbirnih gumbov v njem. Ta metoda se uporablja, kot je navedeno spodaj, za preverjanje, kateri izbirni gumb je izbran.
document.querySelector('input[name='JTP']:checked')
Primer
Na primer, imamo skupino izbirnih gumbov, ki imajo za vse gumbe ime lastnosti = 'sezona'. Zdaj bomo med temi gumbi z imenom sezona preverili, kateri je izbran.
Kopiraj kodo
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.write('Radio button is selected'); } else { document.write('Nothing has been selected'); } Pridobite vrednost označenega izbirnega gumba:
Uporaba getElementById ()
Sledi koda za pridobitev vrednosti označenega izbirnega gumba z metodo getElementById():
Kopiraj kodo
if(document.getElementById('summer').checked) { var selectedValue = document.getElementById('summer').value; alert('Selected Radio Button is: ' + selectedValue); } Uporaba querySelector()
Sledi koda za pridobitev vrednosti označenega izbirnega gumba z uporabo metode querySelector():
Kopiraj kodo
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { alert('Selected radio button values is: ' + getSelectedValue.value); } Celotna koda za pridobitev izbrane vrednosti izbirnega gumba
V tem primeru bomo združili vso zgornjo kodo, da ustvarimo in označimo izbirni gumb. Po tem bomo pridobili tudi vrednost izbranega radijskega gumba.
Kopiraj kodo
<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'; } } Preizkusite zdaj Izhod
Ko boste izvedli zgornjo kodo, se bo izvajala v spletu in dala rezultat, kot je podan spodaj:
Izberite enega od izbirnih gumbov in kliknite na Predloži in pridobite izbrano vrednost.
V primeru, da ne izberete nobenega letnega časa in neposredno kliknete na Predloži gumb, vam bo prikazalo sporočilo o napaki, ki - Izbrali niste nobenega letnega časa ker smo uporabili validacijo.
hashset java
Pridobite vrednost izbranega izbirnega gumba: querySelector()
Metoda DOM querySelector().
Funkcija querySelector() je metoda DOM JavaScripta. Ta metoda se uporablja za pridobitev elementa, ki se ujema s podanim Izbirnik CSS v dokumentu. Ne pozabite, da morate določiti lastnost imena izbirnega gumba v kodi HTML.
Uporablja se kot document.querySelector('input[name='JTP']:preverjeno') znotraj da preverite izbrano vrednost izbirnega gumba iz skupine izbirnih gumbov. Minimizira dolžino kode tako, da pridobi vrednost izbranega izbirnega gumba z majhno vrstico kode.
var selectedValue = document.querySelector('input[name='JTP']:checked')
Oglejte si spodnjo kodo, kako se bo uporabljala z obrazcem HTML:
Kopiraj kodo
<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'; } } Preizkusite zdaj Izhod
Ko boste izvedli zgornjo kodo, vam bo prikazal rezultat v spletu, kot je navedeno spodaj. Tukaj izberite svoj najljubši letni čas.
Ko izberete vrednost med danim izbirnim gumbom in kliknete na Predloži gumb, boste izbrano vrednost dobili na spletu.
V primeru, da kliknete na Predloži brez izbire katerega koli izbirnega gumba, vam bo prikazalo sporočilo o napaki, ki - Izbrali niste nobenega letnega časa .
Torej, tukaj lahko vidite oboje getElementById('sezona').value in document.querySelector('input[name='JTP']:preverjeno') delo enako. Oba se uporabljata za iskanje označene vrednosti izbirnega gumba. Uporabite lahko katerega koli od njih.
getElementById proti querySelector
Obe metodi DOM getElementByID() in querySelector() delujeta skoraj enako. Vendar pa imajo tudi nekaj razlik, kot so zmogljivost in velikost kode itd. Oglejmo si nekaj razlik med njimi:
Dolžina kode
Koda, napisana z getElementById, je nekoliko daljša od querySelector. Z uporabo metode getElementById moramo preveriti vsak izbirni gumb posebej, kateri je označen.
Po drugi strani pa, če uporabljate metodo querySelector DOM, morate samo vnesti eno vrstico kode, da preverite označeni izbirni gumb in pridobite njegovo vrednost. Torej, sklep je, da querySelector zahteva manj kode.
spustni meni javascript
Izvedba
Obe funkciji zagotavljata dobro delovanje, vendar morate vedeti, katera je boljša. The getElementById metoda je veliko hitrejša od querySelector metoda. Tudi metoda querySelector je nekoliko zapletena.
Vrednost, ki jo uporabljajo metode DOM
Metoda getElementById med preverjanjem označenega gumba vedno uporablja edinstven ID vsakega izbirnega gumba in vrne prvi element, ki se ujema z ID-jem.
Medtem ko querySelector uporablja skupni ime (izbirnik) za vse izbirne gumbe, da dobi označen izbirni gumb in vrne prvi element, ki se ujema s podanim izbirnikom.