En alternativknap er et ikon, der bruges i formularer til at modtage input fra brugeren. Det giver brugerne mulighed for at vælge en værdi fra gruppen af ​​radioknapper. Radioknapper bruges som udgangspunkt til enkelt udvalg fra flere , som mest bruges i GUI-former.

Du kan kun markere/markere én alternativknap mellem to eller flere alternativknapper. I dette kapitel vil vi guide dig til, hvordan du kontrollerer en alternativknap ved hjælp af JavaScript programmeringssprog .

Til dette designer vi først en formular indeholdende radio knapper ved at bruge HTML , og så vil vi bruge JavaScript-programmering til at kontrollere alternativknappen. Vi vil også kontrollere, hvilken alternativknapværdi der er valgt.

Opret en alternativknap

Følgende er en simpel kode til oprettelse af en gruppe radioknapper.

Kopiér kode

erstatte fra streng i java

Vælg din favoritsæson:

Tjek en alternativknap

Vi behøver ikke at skrive nogen specifik kode for at kontrollere alternativknappen. De kan kontrolleres, når de er oprettet eller angivet i HTML-form.

Vi skal dog skrive JavaScript-koden for at få værdien af ​​den markerede alternativknap, som vi vil se i kapitlet nedenfor:

Kontroller, at alternativknappen er valgt eller ej

Der er to måder i JavaScript til at kontrollere den markerede alternativknap eller til at identificere, hvilken alternativknap der er valgt. JavaScript tilbyder to DOM-metoder til dette.

getElementById querySelector

Egenskaben for indgangsradio checket bruges til at kontrollere, om afkrydsningsfeltet er markeret eller ej. Brug document.getElementById('id').markeret metode til dette. Den vil returnere den kontrollerede status for alternativknappen som en boolsk værdi. Det kan enten være sandt eller falsk.

Rigtigt - Hvis alternativknappen er valgt.

Falsk - Hvis alternativknappen ikke er valgt/markeret.

Se JavaScript-koden nedenfor for at vide, hvordan det virker:

Eksempel

For eksempel har vi en alternativknap ved navn Summer og id = 'sommer'. Nu vil vi kontrollere ved hjælp af denne knap-id, om radioknappen er markeret eller ej.

Kopiér kode

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

querySelector()

Funktionen querySelector() er en DOM-metode til JavaScript. Den bruger den fælles navneegenskab for radioknapper inde i den. Denne metode bruges som angivet nedenfor til at kontrollere, hvilken alternativknap der er valgt.

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

Eksempel

For eksempel har vi en gruppe radioknapper med navnet egenskabsnavn = 'sæson' for alle knapper. Nu, mellem disse knapper kaldet sæson vil vi kontrollere, hvilken der er valgt.

Kopiér 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å værdien af ​​markeret alternativknap:

Brug af getElementById ()

Følgende er koden til at få værdien af ​​markeret alternativknap ved hjælp af getElementById() metoden:

Kopiér kode

fuld hugorm sandhedstabel

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

Brug af querySelector()

Følgende er koden til at få værdien af ​​markeret alternativknap ved hjælp af querySelector() metoden:

Kopiér kode

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

Fuld kode for at få valgt alternativknapværdi

I dette eksempel vil vi sætte al ovenstående kode sammen for at oprette og kontrollere en alternativknap. Derefter henter vi også værdien af ​​den valgte alternativknap.

Kopiér 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;; } } 

Produktion

Når du vil udføre ovenstående kode, vil den køre på nettet og give output som angivet nedenfor:

Vælg en af ​​alternativknapperne, og klik på Indsend knappen og få den valgte værdi.

Hvis du ikke vælger nogen af ​​årstiderne og klikker direkte på Indsend knappen, vil den vise dig en fejlmeddelelse, der - Du har ikke valgt nogen sæson fordi vi har brugt valideringen.

Hent værdien af ​​den valgte alternativknap: querySelector()

DOM querySelector() metode

Funktionen querySelector() er en DOM-metode til JavaScript. Denne metode bruges til at få det element, der matcher det angivne CSS-vælger i dokumentet. Husk at du skal angive navnegenskaben for alternativknappen i HTML-kode.

Det bruges som document.querySelector('input[navn='JTP']:markeret') inde i fanen for at kontrollere den valgte alternativknapværdi fra gruppen af ​​alternativknapper. Det minimerer kodens længde ved at få værdien af ​​den valgte alternativknap ved hjælp af en lille kodelinje.

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

Se koden nedenfor, hvordan den vil bruge med HTML-formular:

Kopiér 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;; } } 

Produktion

Når du vil udføre ovenstående kode, vil den vise dig outputtet på nettet som angivet nedenfor. Herfra skal du vælge din yndlingsårstid.

Når du vælger en værdi mellem den givne alternativknap og klikker på Indsend knappen, får du den valgte værdi på nettet.

Hvis du klikker på Indsend knappen uden at vælge nogen af ​​alternativknapperne, vil den vise dig en fejlmeddelelse, der - Du har ikke valgt nogen sæson .

Så her kan du se begge dele getElementById('sæson').værdi og document.querySelector('input[navn='JTP']:markeret') arbejde det samme. Begge bruges til at finde den afkrydsede alternativknapværdi. Du kan bruge enhver af dem.

getElementById vs querySelector

Begge DOM-metoder getElementByID() og querySelector() fungerer næsten det samme. Men de har også få forskelle som ydeevne og størrelse på kode osv. Lad os se en forskel mellem dem:

Kodens længde

Koden skrevet med getElementById er en smule længere end querySelector. Ved at bruge getElementById-metoden skal vi kontrollere hver radioknap individuelt, hvilken der er markeret.

På den anden side, hvis du bruger querySelector DOM-metoden, skal du bare sætte en enkelt kodelinje for at kontrollere den markerede radioknap og få dens værdi. Så konklusionen er, at querySelector kræver mindre kode.

Ydeevne

Begge funktioner giver god ydeevne, men alt hvad du behøver for at vide, hvilken der er bedst. Det getElementById metoden er meget hurtigere end querySelector metode. querySelector-metoden er også lidt kompleks.

Værdi brugt af DOM-metoder

GetElementById-metoden bruger altid et unikt id for hver radioknap, mens du markerer den markerede knap og returnerer det første element, der matcher id'et.

css-justeringsbilleder

Hvorimod querySelector bruger en fælles navn (vælger) for alle alternativknapper for at få den markerede alternativknap og returnerer det første element, der matcher med den angivne vælger.