TechCodeview

Valintanappi on kuvake, jota käytetään lomakkeissa ottamaan syötteitä käyttäjältä. Sen avulla käyttäjät voivat valita yhden arvon valintanappien ryhmästä. Radiopainikkeita käytetään periaatteessa yksi valinta useista , jota käytetään enimmäkseen GUI-muodoissa.

Voit merkitä/valita vain yhden valintanapin kahden tai useamman valintanapin välillä. Tässä luvussa opastamme sinua tarkistamaan valintanappi käyttämällä JavaScript ohjelmointikieli .

Tätä varten suunnittelemme ensin radion sisältävän lomakkeen painikkeet käyttämällä HTML-koodia, ja sitten käytämme JavaScript-ohjelmointia valintanapin tarkistamiseen. Tarkistamme myös, mikä valintanapin arvo on valittu.

Luo valintanappi

Seuraavassa on yksinkertainen koodi valintanappiryhmän luomiseksi.

Kopioi koodi

laskea erillinen sql

Valitse suosikkikausi:

Tarkista valintanappi

Meidän ei tarvitse kirjoittaa mitään erityistä koodia tarkistaaksemme valintanapin. Ne voidaan tarkistaa, kun ne on luotu tai määritetty HTML-muodossa.

Meidän on kuitenkin kirjoitettava JavaScript-koodi saadaksemme tarkistetun valintanapin arvon, jonka näemme seuraavassa luvussa:

Tarkista, onko valintanappi valittu vai ei

JavaScriptissä on kaksi tapaa tarkistaa merkitty valintanappi tai tunnistaa valittuna oleva valintanappi. JavaScript tarjoaa tähän kaksi DOM-menetelmää.

getElementById querySelector

Input radio checked -ominaisuutta käytetään tarkistamaan, onko valintaruutu valittu vai ei. Käyttää document.getElementById('id').tarkistettu menetelmä tähän. Se palauttaa valintanapin tarkistetun tilan Boolen arvona. Se voi olla joko totta tai tarua.

Totta - Jos valintanappi on valittuna.

Väärä - Jos valintanappia ei ole valittu/ valittu.

Katso alla oleva JavaScript-koodi saadaksesi tietää, miten se toimii:

Esimerkki

Meillä on esimerkiksi valintanappi nimeltä Kesä ja id = 'kesä'. Nyt tarkistamme tällä painikkeen tunnuksella, onko valintanappi merkitty vai ei.

Kopioi koodi

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

querySelector()

QuerySelector()-funktio on JavaScriptin DOM-menetelmä. Se käyttää sisällään radiopainikkeiden yleisnimiominaisuutta. Tätä menetelmää käytetään alla kuvatulla tavalla tarkistamaan, mikä valintanappi on valittuna.

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

Esimerkki

Meillä on esimerkiksi ryhmä valintapainikkeita, joiden nimi ominaisuuden nimi = 'season' kaikille painikkeille. Nyt näiden kausi-nimien painikkeiden välissä tarkistamme kumpi on valittu.

Kopioi koodi

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

Hanki tarkistetun valintanapin arvo:

Käytä getElementById ()

Seuraavassa on koodi tarkistetun valintanapin arvon saamiseksi getElementById()-menetelmällä:

Kopioi koodi

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

querySelector()

Seuraavassa on koodi tarkistetun valintanapin arvon saamiseksi käyttämällä querySelector()-menetelmää:

Kopioi koodi

muuntaa merkkijonon int:ksi Javassa

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

Täysi koodi valitun valintanapin arvon saamiseksi

Tässä esimerkissä yhdistämme yllä olevan koodin valintanapin luomiseksi ja tarkistamiseksi. Tämän jälkeen noudetaan myös valitun valintanapin arvo.

Kopioi koodi

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

Lähtö

Kun suoritat yllä olevan koodin, se toimii verkossa ja antaa tulosteen alla olevan mukaisesti:

Valitse yksi valintanapeista ja napsauta Lähetä -painiketta ja saat valitun arvon.

Jos et valitse yhtään vuodenaikaa ja napsauta suoraan Lähetä -painiketta, se näyttää sinulle virheilmoituksen, että - Et ole valinnut yhtään vuodenaikaa koska olemme käyttäneet vahvistusta.

Hae valitun valintanapin arvo: querySelector()

DOM querySelector() -menetelmä

QuerySelector()-funktio on JavaScriptin DOM-menetelmä. Tällä menetelmällä saadaan elementti, joka vastaa määritettyä CSS-valitsin asiakirjassa. Muista, että sinun on määritettävä valintanapin nimiominaisuus HTML-koodissa.

Sitä käytetään mm document.querySelector('input[name='JTP']:tarkistettu') sisällä -välilehteä tarkistaaksesi valitun valintanapin arvon valintanappien ryhmästä. Se minimoi koodin pituuden saamalla valitun valintanapin arvon pienellä koodirivillä.

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

Katso alla oleva koodi, kuinka sitä käytetään HTML-lomakkeen kanssa:

Kopioi koodi

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

Lähtö

Kun suoritat yllä olevan koodin, se näyttää sinulle tulosteen verkossa alla olevan mukaisesti. Valitse tästä suosikkivuodenaikasi.

Kun valitset arvon annetun valintanapin väliltä ja napsautat Lähetä -painiketta, saat valitun arvon verkossa.

Jos napsautat Lähetä -painiketta valitsematta yhtään valintanappia, se näyttää sinulle virheilmoituksen, että - Et ole valinnut yhtään vuodenaikaa .

Joten tässä näet molemmat getElementById('season').value ja document.querySelector('input[name='JTP']:tarkistettu') toimi samoin. Molempia käytetään valitun valintanapin arvon etsimiseen. Voit käyttää mitä tahansa niistä.

getElementById vs querySelector

Molemmat DOM-menetelmät getElementByID() ja querySelector() toimivat lähes samalla tavalla. Niissä on kuitenkin myös vähän eroja, kuten suorituskyky ja koodin koko jne. Katsotaanpa eroja niiden välillä:

round robin -aikataulutusalgoritmi

Koodin pituus

GetElementById:llä kirjoitettu koodi on hieman pidempi kuin querySelector. Käytä getElementById-menetelmää, meidän on tarkistettava jokainen valintanappi erikseen, mikä niistä on valittu.

Toisaalta, jos käytät querySelector DOM -menetelmää, sinun tarvitsee vain laittaa yksi koodirivi tarkistaaksesi merkityn valintanapin ja saada sen arvon. Joten johtopäätös on, että querySelector vaatii vähemmän koodia.

Esitys

Molemmat toiminnot tarjoavat hyvän suorituskyvyn, mutta sinun tarvitsee vain tietää, kumpi on parempi. The getElementById menetelmä on paljon nopeampi kuin querySelector menetelmä. Myös querySelector-menetelmä on hieman monimutkainen.

DOM-menetelmien käyttämä arvo

GetElementById-metodi käyttää aina kunkin valintanapin yksilöllistä tunnusta tarkistaessaan merkittyä painiketta ja palauttaa ensimmäisen elementin, joka vastaa id:tä.

Kun taas querySelector käyttää yleistä nimi (valitsin) kaikille valintanapeille saadakseen merkityn valintanapin ja palauttaa ensimmäisen elementin, joka vastaa määritettyä valitsinta.