Kuinka valita radiopainike oletuksena?
Oletuksena ' tarkistettu ” -attribuuttia käytetään valintanapin valitsemiseen. Jos tätä määritettä käytetään useissa valintanapeissa, viimeisin valintanappi valitaan oletuksena. Seuraa vaiheittaista blogia valitaksesi valintanappi oletuksena:
Vaihe 1: Luo valintanapit
Luo HTML-tiedostoon kolme valintanappia ja liitä niihin tarrat:
< keskusta >
< h3 > Valitse kokemustasosi: < / h3 >
< div >
< syöttö tyyppi = 'radio' id = 'aloittelija' nimi = 'kokea' arvo = 'aloittelija' >
< etiketti varten = 'aloittelija' > Aloittelija < / etiketti >
< / div >
< div >
< syöttö tyyppi = 'radio' id = 'keskitason' nimi = 'kokea' arvo = 'keskitason' >
< etiketti varten = 'keskitason' > Keskitason < / etiketti >
< / div >
< div >
< syöttö tyyppi = 'radio' id = 'ennakko' nimi = 'kokea' arvo = 'ennakko' >
< etiketti varten = 'ennakko' > Advance < / etiketti >
< / div >
< / keskusta >
Yllä olevassa koodinpätkässä:
- Valintanappi muodostetaan luomalla yksinkertainen '
' -tunnisteet ja asettamalla sen tyypiksi ' radio ”. - Määritä jokaiselle valintanapille 'nimi', 'id' ja 'arvo'.
- Käytä lopuksi ' id ' syöttökentässä liittääksesi '
' -tunnistetta käyttämällä ' varten ”-attribuutti.
Skriptin suorittamisen jälkeen tulostetaan seuraavasti:
Kuva osoittaa, että valintapainikkeet näkyvät, mutta mitään niistä ei ole oletusarvoisesti valittu.
Vaihe 2: Valitse oletusarvoisesti
' tarkistettu ” -attribuuttia käytetään valintanapin automaattiseen valintaan. Se valitsee vain yhden vaihtoehdon. Siksi on parempi tapa valita yksi valintanappi oletuksena. Se rajoittaa käyttäjää valitsemaan oikean vaihtoehdon:
< div >
< syöttö tyyppi = 'radio' id = 'aloittelija' nimi = 'kokea' arvo = 'aloittelija' tarkistettu>
< etiketti varten = 'aloittelija' > Aloittelija< / etiketti >
< / div >
Yllä olevassa koodissa tarkistettu attribuuttia käytetään ja se on määritetty vain ensimmäiseen syöttökenttään.
Yllä olevan koodin suorittamisen jälkeen verkkosivu näyttää tältä:
Tulos osoittaa, että ensimmäinen valintanappi valitaan oletusarvoisesti jokaisessa sivun päivityksessä.
Bonusvinkki: Käytä JavaScriptiä valitaksesi valintanapin oletuksena
Jos haluat valita oletuksena valintanapin JavaScriptin avulla, käytä valintanappia tunnuksella id. Valitse sitten sen tarkistettu attribuutti ja aseta sen Boolen arvoksi 'true' alla olevan koodin mukaisesti:
< käsikirjoitus >document.getElementById ( 'aloittelija' ) . tarkistettu = totta;
< / käsikirjoitus >
Tässä koodissa ' aloittelija ” on oletusarvoisesti valitun valintanapin tunnus.
Skriptin kääntämisen jälkeen tuloste alla:
Yllä olevassa tilannekuvassa ensimmäinen valintanappi on oletusarvoisesti valittu JavaScriptin avulla.
Johtopäätös
Käyttäjät voivat valita valintanapin ' tarkistettu ”-attribuutti. Jos valittua määritettä käytetään useammassa kuin yhdessä valintanapissa, valintanappi saa viimeisimmän 'tarkistetun' attribuutin arvon. Jos haluat valita oletuksena valintanapin JavaScriptin avulla, käytä valintanappia tunnuksella id. Tämä blogi on onnistuneesti osoittanut, kuinka valintanappi valitaan oletusarvoisesti.