TechCodeview

Radijo mygtukas yra piktograma, kuri naudojama formose, norint priimti vartotojo įvestį. Tai leidžia vartotojams pasirinkti vieną reikšmę iš radijo mygtukų grupės. Radijo mygtukai iš esmės naudojami vienas pasirinkimas iš kelių , kuris dažniausiai naudojamas GUI formose.

Galite pažymėti/pažymėti tik vieną akutę tarp dviejų ar daugiau radijo mygtukų. Šiame skyriuje paaiškinsime, kaip patikrinti radijo mygtuką naudojant JavaScript programavimo kalba .

Tam pirmiausia sukuriame formą, kurioje yra radijas mygtukai naudodami HTML , tada naudosime JavaScript programavimą, kad patikrintume radijo mygtuką. Taip pat patikrinsime, kuri radijo mygtuko reikšmė pasirinkta.

Sukurkite radijo mygtuką

Toliau pateikiamas paprastas kodas radijo mygtukų grupei sukurti.

Kopijuoti kodą

perdaryti žemėlapį

Išsirinkite savo mėgstamiausią sezoną:

Patikrinkite radijo mygtuką

Mums nereikia rašyti jokio konkretaus kodo, kad patikrintume radijo mygtuką. Juos galima patikrinti, kai jie yra sukurti arba nurodyti HTML formoje.

Tačiau turime parašyti „JavaScript“ kodą, kad gautume pažymėto radijo mygtuko reikšmę, kurią pamatysime toliau pateiktame skyriuje:

Patikrinkite, ar akutė pasirinkta, ar ne

„JavaScript“ yra du būdai, kaip patikrinti pažymėtą radijo mygtuką arba nustatyti, kuris mygtukas pasirinktas. „JavaScript“ siūlo du DOM metodus.

getElementById querySelector

Įvesties radijo patikrinta ypatybė naudojama patikrinti, ar žymimasis laukelis pažymėtas, ar ne. Naudokite document.getElementById('id'). patikrinta metodas tam. Jis grąžins pažymėtą radijo mygtuko būseną kaip Būlio reikšmę. Tai gali būti tiesa arba klaidinga.

Tiesa - Jei pasirinktas radijo mygtukas.

Netiesa - Jei radijo mygtukas nepasirinktas/nepažymėtas.

Peržiūrėkite toliau pateiktą „JavaScript“ kodą, kad sužinotumėte, kaip jis veikia:

Pavyzdys

Pavyzdžiui, turime radijo mygtuką Vasara ir id = 'vasara'. Dabar naudodami šį mygtuko ID patikrinsime, ar radijo mygtukas pažymėtas, ar ne.

Kopijuoti 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() yra „JavaScript“ DOM metodas. Jis naudoja savo viduje esančių radijo mygtukų bendrąjį pavadinimą. Šis metodas naudojamas, kaip nurodyta toliau, norint patikrinti, kuris radijo mygtukas pasirinktas.

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

Pavyzdys

Pavyzdžiui, turime radijo mygtukų grupę, kurios pavadinimas yra ypatybės pavadinimas = 'season' visiems mygtukams. Dabar tarp šių mygtukų, pavadintų sezonas, patikrinsime, kuris iš jų pasirinktas.

Kopijuoti kodą

generuoti atsitiktinį skaičių Java

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

Gaukite pažymėto radijo mygtuko reikšmę:

Naudojant getElementById ()

Toliau pateikiamas kodas, skirtas gauti patikrinto radijo mygtuko reikšmę naudojant getElementById() metodą:

Kopijuoti kodą

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

Naudojant querySelector()

Toliau pateikiamas kodas, skirtas gauti patikrinto radijo mygtuko reikšmę naudojant querySelector() metodą:

Kopijuoti kodą

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

Visas kodas, norint gauti pasirinktą radijo mygtuko reikšmę

Šiame pavyzdyje mes sujungsime visą aukščiau pateiktą kodą, kad sukurtume ir patikrintume radijo mygtuką. Po to taip pat gausime pasirinkto radijo mygtuko reikšmę.

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

Išvestis

Kai vykdysite aukščiau pateiktą kodą, jis veiks internete ir pateiks išvestį, kaip nurodyta toliau:

Pasirinkite vieną iš radijo mygtukų ir spustelėkite Pateikti mygtuką ir gaukite pasirinktą vertę.

Jei nepasirinkote nė vieno iš sezonų ir tiesiogiai spustelėkite Pateikti mygtuką, jis parodys klaidos pranešimą, kad - Jūs nepasirinkote jokio sezono nes naudojome patvirtinimą.

Gaukite pasirinkto radijo mygtuko reikšmę: querySelector()

DOM querySelector() metodas

Funkcija querySelector() yra „JavaScript“ DOM metodas. Šis metodas naudojamas norint gauti elementą, kuris atitinka nurodytą CSS parinkiklis dokumente. Atminkite, kad HTML kode turite nurodyti radijo mygtuko pavadinimo ypatybę.

Jis naudojamas kaip document.querySelector('input[name='JTP']:checked') viduje skirtuką, kad patikrintumėte pasirinktą radijo mygtuko reikšmę iš radijo mygtukų grupės. Jis sumažina kodo ilgį, gaudamas pasirinkto radijo mygtuko reikšmę naudodami nedidelę kodo eilutę.

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

Žiūrėkite toliau pateiktą kodą, kaip jis bus naudojamas su HTML forma:

Kopijuoti kodą

eilutė prieš stulpelį

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

Išvestis

Kai vykdysite aukščiau pateiktą kodą, jis parodys jums išvestį žiniatinklyje, kaip nurodyta toliau. Iš čia pasirinkite savo mėgstamą sezoną.

Kai pasirenkate reikšmę tarp nurodyto radijo mygtuko ir spustelėkite Pateikti mygtuką, pasirinktą vertę gausite žiniatinklyje.

Jei spustelėsite Pateikti mygtuką nepasirinkus nė vieno radijo mygtuko, bus rodomas klaidos pranešimas, kad - Jūs nepasirinkote jokio sezono .

Taigi, čia galite pamatyti, kad abu getElementById('season').value ir document.querySelector('input[name='JTP']:checked') dirbti taip pat. Abu naudojami norint rasti pažymėtą radijo mygtuko reikšmę. Galite naudoti bet kurį iš jų.

getElementById vs querySelector

Abu DOM metodai getElementByID() ir querySelector() veikia beveik vienodai. Tačiau jie taip pat turi keletą skirtumų, pvz., našumo ir kodo dydžio ir kt. Pažiūrėkime, koks skirtumas tarp jų:

Kodo ilgis

Kodas, parašytas naudojant getElementById, yra šiek tiek ilgesnis nei querySelector. Naudodami metodą getElementById, turime atskirai patikrinti kiekvieną radijo mygtuką, kuris yra pažymėtas.

Kita vertus, jei naudojate querySelector DOM metodą, tereikia įdėti vieną kodo eilutę, kad patikrintumėte pažymėtą radijo mygtuką ir gautumėte jo vertę. Taigi, daroma išvada, kad querySelector reikia mažiau kodo.

Spektaklis

Abi funkcijos užtikrina gerą našumą, bet viskas, ko jums reikia žinoti, kuri iš jų yra geresnė. The getElementById metodas yra daug greitesnis nei querySelector metodas. querySelector metodas taip pat yra šiek tiek sudėtingas.

DOM metodų naudojama reikšmė

Metodas getElementById, tikrindamas pažymėtą mygtuką, visada naudoja unikalų kiekvieno radijo mygtuko ID ir grąžina pirmąjį elementą, atitinkantį id.

Tuo tarpu querySelector naudoja bendrą vardas (rinkėjas) kad visi radijo mygtukai gautų pažymėtą akutę ir grąžintų pirmąjį elementą, atitinkantį nurodytą parinkiklį.