Radio poga ir ikona, kas tiek izmantota veidlapās, lai saņemtu lietotāja ievadi. Tas ļauj lietotājiem izvēlēties vienu vērtību no radiopogu grupas. Radio pogas pamatā tiek izmantotas viena atlase no vairākiem , ko galvenokārt izmanto GUI formās.
Varat atzīmēt/atzīmēt tikai vienu radiopogu starp divām vai vairākām radio pogām. Šajā nodaļā mēs sniegsim jums norādījumus, kā pārbaudīt radio pogu, izmantojot JavaScript programmēšanas valoda .
Šim nolūkam vispirms mēs izstrādājam veidlapu, kurā ir radio pogas izmantojot HTML , un tad radio pogas pārbaudei izmantosim JavaScript programmēšanu. Mēs arī pārbaudīsim, kura radio pogas vērtība ir atlasīta.
Izveidojiet radio pogu
Tālāk ir sniegts vienkāršs kods radio pogu grupas izveidei.
Kopēt kodu
stāvus
Izvēlieties savu iecienītāko sezonu:
VasaraZiema
Lietains
Rudens
Izmēģiniet to tūlīt
Pārbaudiet radio pogu
Mums nav jāraksta īpašs kods, lai pārbaudītu radio pogu. Tos var pārbaudīt, kad tie ir izveidoti vai norādīti HTML formā.
Tomēr mums ir jāieraksta JavaScript kods, lai iegūtu pārbaudītās radio pogas vērtību, ko redzēsim nākamajā nodaļā:
Pārbaudiet, vai radio poga ir atlasīta vai nav
JavaScript ir divi veidi, kā pārbaudīt atzīmēto pogu vai noteikt, kura radio poga ir atlasīta. JavaScript šim nolūkam piedāvā divas DOM metodes.
Ievades radio pārbaudītais rekvizīts tiek izmantots, lai pārbaudītu, vai izvēles rūtiņa ir atlasīta vai nav. Izmantot document.getElementById('id').pārbaudīts metode šim nolūkam. Tas atgriezīs radio pogas pārbaudīto statusu kā Būla vērtību. Tā var būt patiesa vai nepatiesa.
Taisnība - Ja ir atlasīta radio poga.
Nepatiesi - Ja radio poga nav atlasīta/atzīmēta.
Skatiet tālāk esošo JavaScript kodu, lai uzzinātu, kā tas darbojas:
Piemērs
Piemēram, mums ir radio poga ar nosaukumu Vasara un id = 'vasara'. Tagad, izmantojot šo pogas ID, mēs pārbaudīsim, vai radio poga ir atzīmēta vai nav.
Kopēt kodu
java kaudze
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() ir JavaScript DOM metode. Tas izmanto tā iekšpusē esošo radiopogu vispārpieņemto nosaukumu. Šī metode tiek izmantota, kā norādīts tālāk, lai pārbaudītu, kura radio poga ir atlasīta.
document.querySelector('input[name='JTP']:checked')
Piemērs
Piemēram, mums ir radiopogu grupa, kuras nosaukums ir rekvizīta nosaukums = 'sezona' visām pogām. Tagad starp šīm pogām ar nosaukumu sezona mēs pārbaudīsim, kura no tām ir atlasīta.
Kopēt kodu
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.write('Radio button is selected'); } else { document.write('Nothing has been selected'); } Iegūstiet pārbaudītās radio pogas vērtību:
GetElementById () izmantošana
Šis ir kods, lai iegūtu pārbaudītās radio pogas vērtību, izmantojot metodi getElementById().
Kopēt kodu
if(document.getElementById('summer').checked) { var selectedValue = document.getElementById('summer').value; alert('Selected Radio Button is: ' + selectedValue); } Izmantojot querySelector()
Šis ir kods, lai iegūtu pārbaudītās radio pogas vērtību, izmantojot querySelector() metodi:
Kopēt kodu
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { alert('Selected radio button values is: ' + getSelectedValue.value); } Pilns kods, lai iegūtu atlasītās radio pogas vērtību
Šajā piemērā mēs apvienosim visu iepriekš minēto kodu, lai izveidotu un pārbaudītu radio pogu. Pēc tam mēs arī iegūsim atlasītās radio pogas vērtību.
Kopēt kodu
<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'; } } Izmēģiniet to tūlīt Izvade
Kad izpildīsit iepriekš minēto kodu, tas darbosies tīmeklī un sniegs izvadi, kā norādīts tālāk:
Izvēlieties vienu no radio pogām un noklikšķiniet uz Iesniegt pogu un iegūstiet izvēlēto vērtību.
Ja neizvēlaties nevienu no gadalaikiem un tieši noklikšķiniet uz Iesniegt pogu, tiks parādīts kļūdas ziņojums, ka - Jūs neesat atlasījis nevienu sezonu jo esam izmantojuši validāciju.
Iegūt atlasītās radio pogas vērtību: querySelector()
DOM querySelector() metode
Funkcija querySelector() ir JavaScript DOM metode. Šī metode tiek izmantota, lai iegūtu elementu, kas atbilst norādītajam CSS atlasītājs dokumentā. Atcerieties, ka HTML kodā ir jānorāda radio pogas nosaukuma rekvizīts.
To lieto kā document.querySelector('input[name='JTP']:checked') iekšpusē cilni, lai pārbaudītu atlasīto radiopogu vērtību no radiopogu grupas. Tas samazina koda garumu, iegūstot atlasītās radio pogas vērtību, izmantojot nelielu koda rindiņu.
var selectedValue = document.querySelector('input[name='JTP']:checked')
Skatiet tālāk norādīto kodu, kā tas tiks izmantots ar HTML veidlapu:
centos vs rhel
Kopēt kodu
<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'; } } Izmēģiniet to tūlīt Izvade
Kad izpildīsit iepriekš minēto kodu, tas parādīs izvadi tīmeklī, kā norādīts tālāk. Šeit izvēlieties savu iecienītāko gadalaiku.
Kad izvēlaties vērtību starp norādīto radiopogu un noklikšķiniet uz Iesniegt pogu, jūs iegūsit atlasīto vērtību tīmeklī.
Gadījumā, ja noklikšķināsiet uz Iesniegt pogu, neizvēloties nevienu radiopogu, tiks parādīts kļūdas ziņojums, ka - Jūs neesat atlasījis nevienu sezonu .
Tātad, šeit jūs varat redzēt, ka abi getElementById('season').value un document.querySelector('input[name='JTP']:checked') strādāt tāpat. Abi tiek izmantoti, lai atrastu atzīmētās radio pogas vērtību. Jūs varat izmantot jebkuru no tiem.
getElementById vs querySelector
Abas DOM metodes getElementByID() un querySelector() darbojas gandrīz vienādi. Tomēr tiem ir arī dažas atšķirības, piemēram, veiktspēja un koda lielums utt. Apskatīsim dažas atšķirības starp tām:
Koda garums
Kods, kas rakstīts ar getElementById, ir nedaudz garāks nekā querySelector. Izmantojot metodi getElementById, mums ir jāpārbauda katra radio poga atsevišķi, kura ir atzīmēta.
No otras puses, ja izmantojat querySelector DOM metodi, jums vienkārši jāievieto viena koda rindiņa, lai pārbaudītu atzīmēto pogu un iegūtu tās vērtību. Tātad, secinājums ir tāds, ka querySelector ir nepieciešams mazāk koda.
Performance
Abas funkcijas nodrošina labu veiktspēju, taču viss, kas jums jāzina, lai uzzinātu, kura no tām ir labāka. The getElementById metode ir daudz ātrāka nekā querySelector metodi. Arī querySelector metode ir nedaudz sarežģīta.
Vērtība, ko izmanto DOM metodes
Metode getElementById vienmēr izmanto katras radio pogas unikālu ID, vienlaikus pārbaudot atzīmēto pogu, un atgriež pirmo elementu, kas atbilst id.
Savukārt querySelector izmanto kopīgu vārds (izvēlētājs) visām radiopogām, lai iegūtu atzīmēto pogu, un atgriež pirmo elementu, kas atbilst norādītajam atlasītājam.