Un botó d'opció és una icona que s'utilitza als formularis per rebre l'entrada de l'usuari. Permet als usuaris triar un valor del grup de botons d'opció. Els botons de ràdio s'utilitzen bàsicament per a selecció única d'entre diverses , que s'utilitza principalment en formularis GUI.
Podeu marcar/marcar només un botó d'opció entre dos o més botons d'opció. En aquest capítol, us guiarem sobre com comprovar un botó d'opció mitjançant el botó Llenguatge de programació JavaScript .
Per a això, primer dissenyem un formulari que contingui ràdio botons utilitzant HTML , i després utilitzarem la programació JavaScript per comprovar el botó d'opció. També comprovarem quin valor del botó d'opció està seleccionat.
Creeu un botó d'opció
A continuació es mostra un codi senzill per crear un grup de botons d'opció.
Copia el codi
dempeus
Tria la teva temporada preferida:
EstiuHivern
Plujós
Tardor
Prova-ho ara
Comproveu un botó d'opció
No necessitem escriure cap codi específic per comprovar el botó d'opció. Es poden comprovar un cop creats o especificats en format HTML.
Tanmateix, hem d'escriure el codi JavaScript per obtenir el valor del botó d'opció marcat, que veurem al capítol següent:
Comproveu que el botó d'opció estigui seleccionat o no
A JavaScript hi ha dues maneres de comprovar el botó d'opció marcat o d'identificar quin botó d'opció està seleccionat. JavaScript ofereix dos mètodes DOM per a això.
La propietat de verificació de ràdio d'entrada s'utilitza per comprovar si la casella de selecció està seleccionada o no. Ús document.getElementById('id').checked mètode per a això. Tornarà l'estat comprovat del botó d'opció com a valor booleà. Pot ser cert o fals.
veritat - Si el botó d'opció està seleccionat.
Fals - Si el botó d'opció no està seleccionat/marcat.
Consulteu el codi JavaScript a continuació per saber com funciona:
Exemple
Per exemple, tenim un botó d'opció anomenat Summer i id = 'estiu'. Ara, comprovarem amb aquest identificador de botó que el botó d'opció està marcat o no.
Copia el codi
if(document.getElementById('summer').checked == true) { document.write('Summer radio button is selected'); } else { document.write('Summer radio button is not selected'); } querySelector()
La funció querySelector() és un mètode DOM de JavaScript. Utilitza la propietat del nom comú dels botons d'opció que hi ha dins. Aquest mètode s'utilitza com es mostra a continuació per comprovar quin botó d'opció està seleccionat.
lògica proposicional
document.querySelector('input[name='JTP']:checked')
Exemple
Per exemple, tenim un grup de botons d'opció que tenen el nom de propietat name = 'temporada' per a tots els botons. Ara, entre aquests botons anomenats temporada comprovarem quin està seleccionat.
Copia el codi
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.write('Radio button is selected'); } else { document.write('Nothing has been selected'); } Obteniu el valor del botó d'opció marcat:
Utilitzant getElementById ()
El següent és el codi per obtenir el valor del botó d'opció marcat mitjançant el mètode getElementById():
Copia el codi
if(document.getElementById('summer').checked) { var selectedValue = document.getElementById('summer').value; alert('Selected Radio Button is: ' + selectedValue); } Utilitzant querySelector()
El següent és el codi per obtenir el valor del botó d'opció marcat mitjançant el mètode querySelector():
Copia el codi
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { alert('Selected radio button values is: ' + getSelectedValue.value); } Codi complet per obtenir el valor del botó d'opció seleccionat
En aquest exemple, posarem tot el codi anterior per crear i comprovar un botó d'opció. Després d'això, també recuperarem el valor del botó d'opció seleccionat.
Copia el codi
<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'; } } Prova-ho ara Sortida
Quan executeu el codi anterior, s'executarà al web i donarà la sortida tal com es mostra a continuació:
Trieu un dels botons d'opció i feu clic a Presentar botó i obteniu el valor seleccionat.
En cas que no trieu cap de les estacions i feu clic directament sobre el Presentar botó, us mostrarà un missatge d'error que - No has seleccionat cap temporada perquè hem utilitzat la validació.
Obteniu el valor del botó d'opció seleccionat: querySelector()
Mètode DOM querySelector().
La funció querySelector() és un mètode DOM de JavaScript. Aquest mètode s'utilitza per obtenir l'element que coincideix amb l'especificat Selector CSS al document. Recordeu que heu d'especificar la propietat del nom del botó d'opció al codi HTML.
S'utilitza com document.querySelector('input[name='JTP']:checked') dins del pestanya per comprovar el valor del botó d'opció seleccionat del grup de botons d'opció. Minimitza la longitud del codi obtenint el valor del botó d'opció seleccionat mitjançant una petita línia de codi.
var selectedValue = document.querySelector('input[name='JTP']:checked')
Vegeu el codi a continuació com s'utilitzarà amb el formulari HTML:
Copia el codi
<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'; } } Prova-ho ara Sortida
Quan executeu el codi anterior, us mostrarà la sortida al web tal com es mostra a continuació. A partir d'aquí, tria la teva temporada preferida.
Quan trieu un valor entre el botó d'opció donat i feu clic a Presentar botó, obtindreu el valor seleccionat al web.
En cas que feu clic a Presentar sense triar cap botó d'opció, us mostrarà un missatge d'error que: No has seleccionat cap temporada .
diferència de tigre i lleó
Així doncs, aquí podeu veure que tots dos getElementById('temporada').value i document.querySelector('input[name='JTP']:checked') treballen igual. Tots dos s'utilitzen per trobar el valor del botó d'opció marcat. Podeu utilitzar qualsevol d'ells.
getElementById vs querySelector
Els dos mètodes DOM getElementByID() i querySelector() funcionen gairebé igual. Tanmateix, també tenen poques diferències, com ara el rendiment i la mida del codi, etc. Vegem algunes diferències entre ells:
Longitud del codi
El codi escrit amb getElementById és una mica més llarg que el querySelector. Mitjançant el mètode getElementById, hem de comprovar cada botó d'opció individualment quin està marcat.
D'altra banda, si utilitzeu el mètode querySelector DOM, només heu de posar una sola línia de codi per comprovar el botó d'opció marcat i obtenir-ne el valor. Per tant, la conclusió és que querySelector requereix menys codi.
Rendiment
Ambdues funcions ofereixen un bon rendiment, però tot el que necessiteu per saber quina és la millor. El getElementById mètode és molt més ràpid que el querySelector mètode. El mètode querySelector també és una mica complex.
Valor utilitzat pels mètodes DOM
El mètode getElementById sempre utilitza un identificador únic de cada botó d'opció mentre comproveu el botó marcat i retorna el primer element que coincideix amb l'identificador.
Mentre que querySelector utilitza un comú nom (selector) perquè tots els botons d'opció obtinguin el botó d'opció marcat i retorna el primer element que coincideix amb el selector especificat.