Un buton radio este o pictogramă care este utilizată în formulare pentru a prelua informații de la utilizator. Permite utilizatorilor să aleagă o valoare din grupul de butoane radio. Butoanele radio sunt folosite în principiu pentru o singură selecție din mai multe , care este folosit mai ales în formularele GUI.

Puteți marca/bifa doar un buton radio între două sau mai multe butoane radio. În acest capitol, vă vom ghida despre cum să verificați un buton radio folosind butonul Limbajul de programare JavaScript .

Pentru aceasta, mai întâi proiectăm un formular care conține radio butoane folosind HTML și apoi vom folosi programarea JavaScript pentru a verifica butonul radio. Vom verifica, de asemenea, ce valoare a butonului radio este selectată.

Creați un buton radio

Urmează un cod simplu pentru crearea unui grup de butoane radio.

Copiați codul

unordered_map c++

Alege sezonul tau preferat:

Verificați un buton radio

Nu trebuie să scriem niciun cod specific pentru a verifica butonul radio. Ele pot fi verificate odată ce sunt create sau specificate în formular HTML.

Totuși, trebuie să scriem codul JavaScript pentru a obține valoarea butonului radio bifat, pe care o vom vedea în capitolul de mai jos:

Verificați dacă butonul radio este selectat sau nu

Există două moduri în JavaScript pentru a verifica butonul radio marcat sau pentru a identifica ce buton radio este selectat. JavaScript oferă două metode DOM pentru aceasta.

getElementById querySelector

Proprietatea de bifare radio de intrare este utilizată pentru a verifica dacă caseta de selectare este selectată sau nu. Utilizare document.getElementById('id').verificat metoda pentru aceasta. Va returna starea verificată a butonului radio ca valoare booleană. Poate fi fie adevărat, fie fals.

Adevărat - Dacă butonul radio este selectat.

Fals - Dacă butonul radio nu este selectat/ bifat.

Consultați codul JavaScript de mai jos pentru a afla cum funcționează:

Exemplu

De exemplu, avem un buton radio numit Vară și id = „vară”. Acum, vom verifica folosind acest ID de buton dacă butonul radio este marcat sau nu.

Copiați codul

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

querySelector()

Funcția querySelector() este o metodă DOM a JavaScript. Folosește proprietatea numelui comun al butoanelor radio din interiorul său. Această metodă este utilizată după cum este prezentat mai jos pentru a verifica ce buton radio este selectat.

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

Exemplu

De exemplu, avem un grup de butoane radio având numele proprietății nume = „sezon” pentru toate butoanele. Acum, între aceste butoane numite sezon vom verifica care este selectat.

Copiați codul

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

Obțineți valoarea butonului radio bifat:

Folosind getElementById ()

Următorul este codul pentru a obține valoarea butonului radio bifat folosind metoda getElementById():

Copiați codul

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

Folosind querySelector()

Următorul este codul pentru a obține valoarea butonului radio bifat folosind metoda querySelector():

Copiați codul

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

Cod complet pentru a obține valoarea selectată a butonului radio

În acest exemplu, vom pune împreună tot codul de mai sus pentru a crea și a verifica un buton radio. După aceea, vom prelua și valoarea butonului radio selectat.

Copiați codul

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

Ieșire

Când veți executa codul de mai sus, acesta va rula pe web și va da rezultatul după cum se arată mai jos:

Alegeți unul dintre butoanele radio și faceți clic pe Trimite butonul și obțineți valoarea selectată.

seria Fibonacci în java

În cazul în care nu alegeți niciun anotimp și faceți clic direct pe Trimite butonul, vă va afișa un mesaj de eroare care - Nu ai selectat niciun sezon pentru că am folosit validarea.

Obțineți valoarea butonului radio selectat: querySelector()

Metoda DOM querySelector().

Funcția querySelector() este o metodă DOM a JavaScript. Această metodă este folosită pentru a obține elementul care se potrivește cu cel specificat Selector CSS în document. Rețineți că trebuie să specificați proprietatea nume a butonului radio în codul HTML.

Este folosit ca document.querySelector('input[name='JTP']:checked') în interiorul pentru a verifica valoarea butonului radio selectat din grupul de butoane radio. Minimizează lungimea codului prin obținerea valorii butonului radio selectat folosind o linie mică de cod.

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

Vedeți codul de mai jos cum se va folosi cu formularul HTML:

Copiați codul

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

Ieșire

Când veți executa codul de mai sus, acesta vă va afișa rezultatul pe web, așa cum este prezentat mai jos. De aici, alege anotimpul preferat.

Când alegeți o valoare între butonul radio dat și faceți clic pe Trimite butonul, veți obține valoarea selectată pe web.

unde este introducerea tastei pe tastatura laptopului

În cazul în care faceți clic pe Trimite fără să alegeți niciunul dintre butoanele radio, vă va afișa un mesaj de eroare care - Nu ai selectat niciun sezon .

Deci, aici puteți vedea că ambele getElementById('sezon').value și document.querySelector('input[name='JTP']:checked') lucra la fel. Ambele sunt folosite pentru a găsi valoarea bifată a butonului radio. Puteți folosi oricare dintre ele.

getElementById vs querySelector

Ambele metode DOM getElementByID() și querySelector() funcționează aproape la fel. Cu toate acestea, au și câteva diferențe, cum ar fi performanța și dimensiunea codului, etc. Să vedem o diferență între ele:

Lungimea codului

Codul scris cu getElementById este puțin mai lung decât querySelector. Folosind metoda getElementById, trebuie să verificăm fiecare buton radio individual care este bifat.

Pe de altă parte, dacă utilizați metoda querySelector DOM, trebuie doar să puneți o singură linie de cod pentru a verifica butonul radio marcat și a obține valoarea acestuia. Deci, concluzia este că querySelector necesită mai puțin cod.

Performanţă

Ambele funcții oferă performanțe bune, dar tot ce trebuie să știi care dintre ele este mai bună. The getElementById metoda este mult mai rapidă decât querySelector metodă. Metoda querySelector este, de asemenea, puțin complexă.

Valoare utilizată de metodele DOM

Metoda getElementById folosește întotdeauna un id unic al fiecărui buton radio în timp ce verifică butonul marcat și returnează primul element care se potrivește cu id-ul.

În timp ce querySelector folosește un comun nume (selector) pentru toate butoanele radio pentru a obține butonul radio marcat și returnează primul element care se potrivește cu selectorul specificat.