En alternativknapp er et ikon som brukes i skjemaer for å ta innspill fra brukeren. Den lar brukerne velge én verdi fra gruppen av radioknapper. Radioknapper brukes i utgangspunktet for enkelt utvalg fra flere , som for det meste brukes i GUI-former.

Du kan bare merke/sjekke én alternativknapp mellom to eller flere alternativknapper. I dette kapittelet vil vi veilede deg om hvordan du sjekker en alternativknapp ved å bruke JavaScript programmeringsspråk .

For dette designer vi først et skjema som inneholder radio knapper ved å bruke HTML , og deretter vil vi bruke JavaScript-programmering for å sjekke alternativknappen. Vi vil også sjekke hvilken alternativknappverdi som er valgt.

Lag en alternativknapp

Følgende er en enkel kode for å lage en gruppe radioknapper.

Kopier kode

erstatte fra streng i java

Velg din favorittsesong:

Sjekk en alternativknapp

Vi trenger ikke å skrive noen spesifikk kode for å sjekke alternativknappen. De kan kontrolleres når de er opprettet eller spesifisert i HTML-form.

Vi må imidlertid skrive JavaScript-koden for å få verdien av den avmerkede alternativknappen, som vi vil se i kapittelet nedenfor:

Kontroller at alternativknappen er valgt eller ikke

Det er to måter i JavaScript å sjekke den merkede alternativknappen eller identifisere hvilken alternativknapp som er valgt. JavaScript tilbyr to DOM-metoder for dette.

getElementById querySelector

Egenskapen for input radio checked brukes til å sjekke om avkrysningsboksen er valgt eller ikke. Bruk document.getElementById('id').checked metode for dette. Den vil returnere den sjekkede statusen til alternativknappen som en boolsk verdi. Det kan enten være sant eller usant.

Sant - Hvis alternativknappen er valgt.

Falsk - Hvis alternativknappen ikke er valgt/avmerket.

Se JavaScript-koden nedenfor for å vite hvordan det fungerer:

Eksempel

For eksempel har vi en alternativknapp som heter Summer og id = 'sommer'. Nå vil vi sjekke ved hjelp av denne knapp-ID-en at alternativknappen er merket eller ikke.

Kopier kode

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

querySelector()

querySelector()-funksjonen er en DOM-metode for JavaScript. Den bruker fellesnavnet til radioknapper inne i den. Denne metoden brukes som angitt nedenfor for å sjekke hvilken alternativknapp som er valgt.

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

Eksempel

For eksempel har vi en gruppe radioknapper som har navnet egenskapsnavn = 'sesong' for alle knapper. Nå, mellom disse knappene kalt sesong, vil vi sjekke hvilken som er valgt.

Kopier kode

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

Få verdien av avkrysset alternativknapp:

Bruke getElementById ()

Følgende er koden for å få verdien av avmerket alternativknapp ved å bruke getElementById()-metoden:

Kopier kode

full huggorm sannhetstabell

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

Bruker querySelector()

Følgende er koden for å få verdien av avmerket alternativknapp ved å bruke querySelector()-metoden:

Kopier kode

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

Full kode for å få valgt alternativknappverdi

I dette eksemplet vil vi sette sammen all koden ovenfor for å lage og sjekke en alternativknapp. Etter det vil vi også hente verdien av den valgte alternativknappen.

Kopier kode

 <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;; } } 

Produksjon

Når du vil kjøre koden ovenfor, vil den kjøre på nettet og gi utdata som gitt nedenfor:

Velg en av alternativknappene og klikk på Sende inn knappen og få den valgte verdien.

I tilfelle du ikke velger noen av sesongene og klikker direkte på Sende inn knappen, vil den vise deg en feilmelding som - Du har ikke valgt noen sesong fordi vi har brukt valideringen.

Få verdien av valgt alternativknapp: querySelector()

DOM querySelector() metode

querySelector()-funksjonen er en DOM-metode for JavaScript. Denne metoden brukes for å få elementet som samsvarer med det spesifiserte CSS-velger i dokumentet. Husk at du må spesifisere navnegenskapen til alternativknappen i HTML-kode.

Den brukes som document.querySelector('input[navn='JTP']:sjekket) inne i for å sjekke den valgte alternativknappverdien fra gruppen med alternativknapper. Den minimerer lengden på koden ved å få verdien til den valgte alternativknappen ved å bruke en liten kodelinje.

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

Se koden nedenfor hvordan den vil brukes med HTML-skjema:

Kopier kode

 <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;; } } 

Produksjon

Når du vil utføre koden ovenfor, vil den vise deg utdataene på nettet som gitt nedenfor. Herfra velger du din favorittårstid.

Når du velger en verdi mellom den gitte alternativknappen og klikker på Sende inn knappen, vil du få den valgte verdien på nettet.

I tilfelle du klikker på Sende inn knappen uten å velge noen av alternativknappene, vil den vise deg en feilmelding som - Du har ikke valgt noen sesong .

Så her kan du se at begge deler getElementById('season').verdi og document.querySelector('input[navn='JTP']:sjekket) fungerer det samme. Begge brukes til å finne avkrysset alternativknappverdi. Du kan bruke hvilken som helst av dem.

getElementById vs querySelector

Begge DOM-metodene getElementByID() og querySelector() fungerer nesten likt. Imidlertid har de også få forskjeller som ytelse og størrelse på kode osv. La oss se noen forskjeller mellom dem:

Lengde på koden

Koden skrevet med getElementById er litt lengre enn querySelector. Ved å bruke getElementById-metoden må vi sjekke hver alternativknapp individuelt hvilken som er merket av.

På den andre siden, hvis du bruker querySelector DOM-metoden, må du bare sette inn en enkelt kodelinje for å sjekke den merkede alternativknappen og få verdien. Så konklusjonen er at querySelector krever mindre kode.

Opptreden

Begge funksjonene gir god ytelse, men alt du trenger for å vite hvilken som er best. De getElementById metoden er mye raskere enn querySelector metode. querySelector-metoden er også litt kompleks.

Verdi brukt av DOM-metoder

GetElementById-metoden bruker alltid en unik ID for hver alternativknapp mens du sjekker den merkede knappen og returnerer det første elementet som samsvarer med IDen.

skjær java

Mens querySelector bruker en felles navn (velger) for alle alternativknapper for å få den merkede alternativknappen og returnerer det første elementet som samsvarer med den angitte velgeren.