TechCodeview

Radio gumb je ikona koja se koristi u obrascima za primanje unosa od korisnika. Korisnicima omogućuje odabir jedne vrijednosti iz skupine radio gumba. Radio gumbi se u osnovi koriste za jedan odabir iz više , koji se uglavnom koristi u GUI obrascima.

Možete označiti/označiti samo jedan radio gumb između dva ili više radio gumba. U ovom poglavlju, uputit ćemo vas kako provjeriti radio gumb pomoću JavaScript programski jezik .

Za ovo prvo dizajniramo obrazac koji sadrži radio gumbi pomoću HTML-a, a zatim ćemo koristiti JavaScript programiranje za provjeru radio gumba. Također ćemo provjeriti koja je vrijednost radio gumba odabrana.

Stvorite radio gumb

Slijedi jednostavan kôd za stvaranje grupe radio gumba.

Kopiraj kod

js zamjena

Odaberite svoje omiljeno godišnje doba:

Provjerite radio gumb

Ne trebamo pisati nikakav određeni kod za provjeru radio gumba. Mogu se provjeriti nakon što su kreirani ili navedeni u HTML obliku.

Međutim, moramo napisati JavaScript kod da bismo dobili vrijednost označenog radio gumba, što ćemo vidjeti u poglavlju ispod:

Provjerite je li radio gumb odabran ili ne

U JavaScriptu postoje dva načina za provjeru označenog radio gumba ili za prepoznavanje koji je radio gumb odabran. JavaScript za to nudi dvije DOM metode.

getElementById querySelector

Svojstvo input radio checked koristi se za provjeru je li potvrdni okvir odabran ili ne. Koristiti document.getElementById('id').provjereno metoda za ovo. Vratit će označeni status radio gumba kao Booleovu vrijednost. Može biti istinito ili lažno.

istina - Ako je radio gumb odabran.

netočno - Ako radio gumb nije odabran/označen.

Pogledajte JavaScript kôd u nastavku da biste saznali kako funkcionira:

Primjer

Na primjer, imamo radio gumb pod nazivom Ljeto i id = 'ljeto'. Sada ćemo pomoću ID-a ovog gumba provjeriti je li radio gumb označen ili ne.

Kopiraj kod

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

querySelector()

Funkcija querySelector() DOM je metoda JavaScripta. Koristi zajedničko ime radio gumba unutar njega. Ova se metoda koristi kako je navedeno u nastavku za provjeru koji je radio gumb odabran.

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

Primjer

Na primjer, imamo grupu radio gumba koji imaju name property name = 'season' za sve gumbe. Sada ćemo između ovih gumba pod nazivom sezona provjeriti koji je odabran.

Kopiraj 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'); } 

Dobijte vrijednost označenog radio gumba:

Korištenje getElementById ()

Slijedi kôd za dobivanje vrijednosti označenog radio gumba pomoću metode getElementById():

Kopiraj kod

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

Korištenje querySelector()

Slijedi kôd za dobivanje vrijednosti označenog radio gumba pomoću metode querySelector():

Kopiraj kod

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

Puni kod za dobivanje odabrane vrijednosti radio gumba

U ovom primjeru spojit ćemo sav gornji kod kako bismo stvorili i provjerili radio gumb. Nakon toga ćemo također dohvatiti vrijednost odabranog radio gumba.

sql odaberite kao

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

Izlaz

Kada izvršite gornji kod, on će se pokrenuti na webu i dati izlaz kao što je navedeno u nastavku:

Odaberite jedan od radio gumba i kliknite na podnijeti gumb i dobiti odabranu vrijednost.

U slučaju da ne odaberete nijedno godišnje doba i izravno kliknete na podnijeti gumb, prikazat će vam poruku o pogrešci koja - Niste odabrali nijednu sezonu jer smo koristili validaciju.

Dohvaćanje vrijednosti odabranog radio gumba: querySelector()

DOM querySelector() metoda

Funkcija querySelector() DOM je metoda JavaScripta. Ova metoda se koristi za dobivanje elementa koji odgovara navedenom CSS birač u dokumentu. Imajte na umu da trebate navesti svojstvo naziva radio gumba u HTML kodu.

mrav protiv mavena

Koristi se kao document.querySelector('input[name='JTP']:checked') unutar za provjeru odabrane vrijednosti radio gumba iz grupe radio gumba. Minimizira duljinu koda dobivanjem vrijednosti odabranog radio gumba pomoću malog retka koda.

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

Pogledajte kod u nastavku kako će se koristiti s HTML obrascem:

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

Izlaz

Kada izvršite gornji kod, on će vam pokazati izlaz na webu kao što je navedeno u nastavku. Odavde odaberite svoje omiljeno godišnje doba.

Kada odaberete vrijednost između zadanog radio gumba i kliknete na podnijeti gumb, dobit ćete odabranu vrijednost na webu.

U slučaju da kliknete na podnijeti gumb bez odabira bilo kojeg radio gumba, prikazat će vam poruku o pogrešci koja - Niste odabrali nijednu sezonu .

Dakle, ovdje možete vidjeti oboje getElementById('sezona').vrijednost i document.querySelector('input[name='JTP']:checked') raditi isto. Oba se koriste za pronalaženje označene vrijednosti radio gumba. Možete koristiti bilo koji od njih.

getElementById u odnosu na querySelector

Obje DOM metode getElementByID() i querySelector() rade gotovo isto. Međutim, oni također imaju nekoliko razlika poput izvedbe i veličine koda, itd. Pogledajmo neke razlike između njih:

Duljina koda

Kod napisan s getElementById malo je dulji od querySelector-a. Koristeći metodu getElementById, moramo provjeriti svaki radio gumb pojedinačno koji je označen.

S druge strane, ako koristite querySelector DOM metodu, samo trebate staviti jednu liniju koda da provjerite označeni radio gumb i dobijete njegovu vrijednost. Dakle, zaključak je da querySelector zahtijeva manje koda.

Izvođenje

Obje funkcije pružaju dobre performanse, ali sve što trebate znati je koja je bolja. The getElementById metoda je puno brža od querySelector metoda. Metoda querySelector je također malo složena.

Vrijednost koju koriste DOM metode

Metoda getElementById uvijek koristi jedinstveni ID svakog radio gumba dok provjerava označeni gumb i vraća prvi element koji odgovara ID-u.

Dok querySelector koristi zajednički ime (selektor) za sve radio gumbe da dobije označeni radio gumb i vraća prvi element koji odgovara navedenom selektoru.