Een keuzerondje is een pictogram dat in formulieren wordt gebruikt om invoer van de gebruiker te ontvangen. Hiermee kunnen gebruikers één waarde kiezen uit de groep keuzerondjes. Keuzerondjes worden in principe gebruikt voor de enkele selectie uit meerdere , dat meestal wordt gebruikt in GUI-formulieren.
U kunt slechts één keuzerondje tussen twee of meer keuzerondjes markeren/aanvinken. In dit hoofdstuk laten we u zien hoe u een keuzerondje kunt controleren met behulp van de JavaScript-programmeertaal .
Hiervoor ontwerpen we eerst een formulier met daarin radio toetsen met behulp van HTML , en dan zullen we JavaScript-programmering gebruiken om het keuzerondje te controleren. We zullen ook controleren welke keuzerondjewaarde is geselecteerd.
Maak een keuzerondje
Hieronder volgt een eenvoudige code voor het maken van een groep keuzerondjes.
Kopieer code
Python-lijst initialiseren
Kies jouw favoriete seizoen:
ZomerWinter
Regenachtig
Herfst
Test het nu
Controleer een keuzerondje
We hoeven geen specifieke code te schrijven om het keuzerondje te controleren. Ze kunnen worden gecontroleerd zodra ze zijn gemaakt of gespecificeerd in HTML-vorm.
We moeten echter de JavaScript-code schrijven om de waarde van het aangevinkte keuzerondje te krijgen, wat we in het onderstaande hoofdstuk zullen zien:
Controleer of het keuzerondje is geselecteerd of niet
Er zijn in JavaScript twee manieren om het gemarkeerde keuzerondje te controleren of om te identificeren welk keuzerondje is geselecteerd. JavaScript biedt hiervoor twee DOM-methoden.
De eigenschap 'invoerradio gecontroleerd' wordt gebruikt om te controleren of het selectievakje is ingeschakeld of niet. Gebruik document.getElementById('id').gecontroleerd methode hiervoor. Het retourneert de gecontroleerde status van het keuzerondje als een Booleaanse waarde. Het kan waar of onwaar zijn.
WAAR - Als het keuzerondje is geselecteerd.
Vals - Als het keuzerondje niet is geselecteerd/aangevinkt.
Zie de onderstaande JavaScript-code om te weten hoe het werkt:
Voorbeeld
We hebben bijvoorbeeld een keuzerondje met de naam Zomer en id = 'zomer'. Nu zullen we met behulp van deze knop-ID controleren of het keuzerondje is gemarkeerd of niet.
Kopieer code
if(document.getElementById('summer').checked == true) { document.write('Summer radio button is selected'); } else { document.write('Summer radio button is not selected'); } querySelector()
De functie querySelector() is een DOM-methode van JavaScript. Het gebruikt de algemene naameigenschap van de keuzerondjes erin. Deze methode wordt gebruikt zoals hieronder aangegeven om te controleren welk keuzerondje is geselecteerd.
document.querySelector('input[name='JTP']:checked')
Voorbeeld
We hebben bijvoorbeeld een groep keuzerondjes met de naam eigenschapsnaam = 'seizoen' voor alle knoppen. Nu zullen we tussen deze knoppen met de naam seizoen controleren welke is geselecteerd.
Kopieer code
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.write('Radio button is selected'); } else { document.write('Nothing has been selected'); } Haal de waarde van het aangevinkte keuzerondje op:
GetElementById gebruiken ()
Hieronder volgt de code om de waarde van het aangevinkte keuzerondje op te halen met behulp van de getElementById() -methode:
Kopieer code
if(document.getElementById('summer').checked) { var selectedValue = document.getElementById('summer').value; alert('Selected Radio Button is: ' + selectedValue); } QuerySelector() gebruiken
Hieronder volgt de code om de waarde van het aangevinkte keuzerondje op te halen met behulp van de querySelector() -methode:
Kopieer code
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { alert('Selected radio button values is: ' + getSelectedValue.value); } Volledige code om de geselecteerde keuzerondjewaarde te krijgen
In dit voorbeeld voegen we alle bovenstaande code samen om een keuzerondje te maken en te controleren. Daarna halen we ook de waarde van het geselecteerde keuzerondje op.
Kopieer code
hritik roshan-leeftijd
<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'; } } Test het nu Uitvoer
Wanneer u de bovenstaande code uitvoert, wordt deze op internet uitgevoerd en wordt de onderstaande uitvoer gegeven:
Kies een van de keuzerondjes en klik op de Indienen knop en haal de geselecteerde waarde op.
Als u geen van de seizoenen kiest en direct op klikt Indienen knop, zal er een foutmelding verschijnen dat - U heeft geen seizoen geselecteerd omdat we de validatie hebben gebruikt.
Haal de waarde van het geselecteerde keuzerondje op: querySelector()
DOM querySelector()-methode
De functie querySelector() is een DOM-methode van JavaScript. Deze methode wordt gebruikt om het element te verkrijgen dat overeenkomt met het opgegeven element CSS-kiezer in het document. Houd er rekening mee dat u de eigenschap name van het keuzerondje in HTML-code moet opgeven.
Het wordt gebruikt als document.querySelector('input[naam='JTP']:gecontroleerd') binnen in de om de geselecteerde keuzerondjewaarde uit de groep keuzerondjes te controleren. Het minimaliseert de lengte van de code door de waarde van het geselecteerde keuzerondje op te halen met behulp van een kleine regel code.
var selectedValue = document.querySelector('input[name='JTP']:checked')
Zie de onderstaande code hoe deze zal worden gebruikt met het HTML-formulier:
Kopieer code
<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'; } } Test het nu Uitvoer
Wanneer u de bovenstaande code uitvoert, wordt de uitvoer op internet weergegeven, zoals hieronder weergegeven. Kies hier uw favoriete seizoen.
roep een js-functie aan vanuit html
Wanneer u een waarde kiest tussen de gegeven keuzerondjes en op klikt Indienen knop, krijgt u de geselecteerde waarde op internet.
Als u op de Indienen zonder een van de keuzerondjes te kiezen, zal er een foutmelding verschijnen dat - U heeft geen seizoen geselecteerd .
Dus hier kun je dat allebei zien getElementById('seizoen').value En document.querySelector('input[naam='JTP']:gecontroleerd') werk hetzelfde. Beide worden gebruikt om de aangevinkte keuzerondjewaarde te vinden. Je kunt ze allemaal gebruiken.
getElementById versus querySelector
Beide DOM-methoden getElementByID() en querySelector() werken vrijwel hetzelfde. Ze hebben echter ook enkele verschillen, zoals prestaties en grootte van de code, enz. Laten we eens kijken naar de verschillen tussen beide:
Lengte van de code
De code geschreven met getElementById is iets langer dan de querySelector. Met behulp van de getElementById-methode moeten we voor elk keuzerondje afzonderlijk controleren welk keuzerondje is aangevinkt.
Aan de andere kant, als u de querySelector DOM-methode gebruikt, hoeft u slechts één regel code in te voeren om het gemarkeerde keuzerondje te controleren en de waarde ervan te achterhalen. De conclusie is dus dat querySelector minder code vereist.
Prestatie
Beide functies bieden goede prestaties, maar u hoeft alleen maar te weten welke beter is. De getElementById methode is veel sneller dan de querySelector methode. De querySelector-methode is ook een beetje ingewikkeld.
Waarde gebruikt door DOM-methoden
De getElementById-methode gebruikt altijd een unieke id van elk keuzerondje terwijl de gemarkeerde knop wordt gecontroleerd en retourneert het eerste element dat overeenkomt met de id.
Terwijl querySelector een common naam (kiezer) voor alle keuzerondjes om het gemarkeerde keuzerondje te krijgen en retourneert het eerste element dat overeenkomt met de opgegeven selector.