En alternativknapp är en ikon som används i formulär för att ta emot input från användaren. Det låter användarna välja ett värde från gruppen av radioknappar. Radioknappar används i princip för ett enda urval från flera , som mest används i GUI-former.

Du kan bara markera/markera en alternativknapp mellan två eller flera alternativknappar. I det här kapitlet kommer vi att guida dig om hur du kontrollerar en alternativknapp med hjälp av JavaScript programmeringsspråk .

För detta designar vi först ett formulär som innehåller radio knappar använder HTML , och sedan kommer vi att använda JavaScript-programmering för att kontrollera alternativknappen. Vi kommer också att kontrollera vilket alternativknappvärde som är valt.

Skapa en alternativknapp

Följande är en enkel kod för att skapa en grupp radioknappar.

Kopiera kod

c-sträng i array

Välj din favoritsäsong:

Kontrollera en alternativknapp

Vi behöver inte skriva någon specifik kod för att kontrollera alternativknappen. De kan kontrolleras när de har skapats eller specificerats i HTML-form.

Men vi måste skriva JavaScript-koden för att få värdet på den markerade alternativknappen, vilket vi kommer att se i kapitlet nedan:

Kontrollera att alternativknappen är vald eller inte

Det finns två sätt i JavaScript att kontrollera den markerade alternativknappen eller för att identifiera vilken alternativknapp som är vald. JavaScript erbjuder två DOM-metoder för detta.

getElementById querySelector

Egenskapen för input radio checked används för att kontrollera om kryssrutan är markerad eller inte. Använda sig av document.getElementById('id').checked metod för detta. Den kommer att returnera den markerade statusen för alternativknappen som ett booleskt värde. Det kan vara antingen sant eller falskt.

Sann - Om alternativknappen är vald.

Falskt - Om alternativknappen inte är vald/markerad.

Se JavaScript-koden nedan för att veta hur det fungerar:

Exempel

Till exempel har vi en alternativknapp som heter Sommar och id = 'sommar'. Nu kommer vi att kontrollera med detta knapp-id att radioknappen är markerad eller inte.

Kopiera kod

 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() är en DOM-metod för JavaScript. Den använder den gemensamma namnegenskapen för radioknappar inuti den. Denna metod används enligt nedan för att kontrollera vilken alternativknapp som är vald.

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

Exempel

Till exempel har vi en grupp radioknappar med namnet egenskapsnamn = 'säsong' för alla knappar. Nu, mellan dessa knappar som heter säsong kommer vi att kontrollera vilken som är vald.

Kopiera kod

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

Hämta värdet för markerad alternativknapp:

Använda getElementById ()

Följande är koden för att få värdet på den markerade alternativknappen med metoden getElementById():

Kopiera kod

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

Använder querySelector()

Följande är koden för att få värdet på den markerade alternativknappen med querySelector()-metoden:

Kopiera kod

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

Fullständig kod för att få valt alternativknappsvärde

I det här exemplet kommer vi att sätta ihop all ovanstående kod för att skapa och kontrollera en alternativknapp. Efter det kommer vi också att hämta värdet för den valda alternativknappen.

Kopiera kod

 <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 kör ovanstående kod kommer den att köras på webben och ge utdata enligt nedan:

Välj en av alternativknapparna och klicka på Skicka in knappen och hämta det valda värdet.

Om du inte väljer någon av årstiderna och klickar direkt på Skicka in knappen, kommer det att visa dig ett felmeddelande som - Du har inte valt någon säsong eftersom vi har använt valideringen.

jframe

Hämta värdet för den valda alternativknappen: querySelector()

DOM querySelector() metod

Funktionen querySelector() är en DOM-metod för JavaScript. Denna metod används för att få det element som matchar det angivna CSS-väljare i dokumentet. Kom ihåg att du måste ange namnegenskapen för alternativknappen i HTML-kod.

Den används som document.querySelector('input[namn='JTP']:markerad') inuti för att kontrollera det valda alternativknappsvärdet från gruppen med alternativknappar. Den minimerar längden på koden genom att få värdet på den valda radioknappen med en liten kodrad.

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

Se koden nedan hur den kommer att användas med HTML-formulär:

Kopiera kod

 <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 kör ovanstående kod kommer den att visa dig utdata på webben enligt nedan. Härifrån väljer du din favoritsäsong.

När du väljer ett värde mellan den givna alternativknappen och klickar på Skicka in knappen får du det valda värdet på webben.

Om du klickar på Skicka in utan att välja någon av alternativknapparna, kommer den att visa dig ett felmeddelande som - Du har inte valt någon säsong .

Så här kan du se att båda getElementById('säsong').value och document.querySelector('input[namn='JTP']:markerad') fungerar likadant. Båda används för att hitta det markerade alternativknappens värde. Du kan använda vilken som helst av dem.

getElementById vs querySelector

Båda DOM-metoderna getElementByID() och querySelector() fungerar nästan likadant. Men de har också få skillnader som prestanda och storlek på kod, etc. Låt oss se någon skillnad mellan dem:

Längd på koden

Koden skriven med getElementById är lite längre än querySelector. Med metoden getElementById måste vi kontrollera varje alternativknapp individuellt vilken som är markerad.

Å andra sidan, om du använder querySelector DOM-metoden, behöver du bara sätta en enda kodrad för att kontrollera den markerade radioknappen och få dess värde. Så slutsatsen är att querySelector kräver mindre kod.

påskägg i Android

Prestanda

Båda funktionerna ger bra prestanda men allt du behöver veta vilken som är bäst. De getElementById metoden är mycket snabbare än querySelector metod. Metoden querySelector är också lite komplex.

Värde som används av DOM-metoder

GetElementById-metoden använder alltid ett unikt id för varje alternativknapp medan den markerade knappen kontrolleras och returnerar det första elementet som matchar id:t.

Medan querySelector använder en gemensam namn (väljare) för alla alternativknappar för att få den markerade alternativknappen och returnerar det första elementet som matchar den angivna väljaren.