Tässä kirjoituksessa kuvataan menettely, jolla valintaruutu tarkistetaan ja sen valinta poistetaan JavaScriptin avulla.
Kuinka valita / poistaa valintaruudun valinta JavaScriptin avulla?
Valitse JavaScriptin valintaruudut tai poista niiden valinnat käyttämällä ' tarkistettu ”-attribuutti. Hanki ensin HTML-elementin viite ' valintaruutu ' sille määrätyn ' id ' käyttämällä ' getElementById() -menetelmää ja käytä sitten tarkistettu ” omaisuutta sen arvosta.
Esimerkki 1: Valitse yksittäinen valintaruutu/poista valinta
Luo ensin HTML-tiedosto, jossa on seuraavat koodirivit:
< h3 > Napsauta painikkeita valitaksesi valintaruudun tai poista sen valinnan h3 >
< syötteen tyyppi = 'valintaruutu' id = 'valintaruutu' > Hyväksy ehdot < br >< br >
< painikkeen tyyppi = 'painike' klikkaamalla = 'tarkistaa()' > Joo -painiketta >
< painikkeen tyyppi = 'painike' klikkaamalla = 'uncheck()' > Ei -painiketta >
Yllä olevassa koodissa:
- Luo valintaruutu tunnuksella ' valintaruutu ', jota käytetään elementin käyttämiseen' valintaruutu ”toimintojen suorittamiseen.
- Luo kaksi painiketta, ' Joo ' ja ' Ei ', jos haluat valita tai poistaa valintaruudun, joka käynnistää toiminnon ' tarkistaa() ' ja ' poista valinta () ' klikkaustapahtumassa.
Yllä olevan koodin suorittamisen jälkeen tulos on seuraava:
Määritä seuraavaksi toiminnot, jotka suorittavat JavaScript-tiedoston tai -tunnisteen valintaruudun toimintoja. Valitse valintaruutu käyttämällä alla olevia koodirivejä:
toiminto tarkistaa ( ) {
anna syöttää = asiakirja. getElementById ( 'valintaruutu' ) ;
syöttö. tarkistettu = totta ;
}
Yllä olevassa koodissa:
- Määritä funktio ' tarkistaa() ', joka käynnistää painikkeen napsauttamalla valintaruutua.
- Hae funktion rungosta valintaruudun viite sen tunnuksella ' valintaruutu '' -sovelluksen avulla getElementById() 'menetelmä ja tallenna se muuttujaan' syöttö ”.
- Valitse valintaruutu asettamalla ' tarkistettu 'kiinteistö' totta ”.
Voit poistaa valintaruudun valinnan napsauttamalla ' Ei ”-painiketta, käytä alla annettua koodia:
toiminto poista valinta ( ) {anna syöttää = asiakirja. getElementById ( 'valintaruutu' ) ;
syöttö. tarkistettu = väärä ;
}
Yllä oleva koodinpätkä:
- Määritä funktio ' poista valinta () ', joka käynnistää painikkeen napsauttamalla valintaruudun valinnan poistamiseksi.
- Hae funktion rungosta valintaruudun viite sen tunnuksella ' valintaruutu '' -sovelluksen avulla getElementById() 'menetelmä ja tallenna se muuttujaan' syöttö ”.
- Poista valintaruudun valinta asettamalla ' tarkistettu 'kiinteistö' väärä ”.
Määritä lopuksi toiminto, joka poistaa valintaruudun oletusarvoisesti valinnan sivun latauksen yhteydessä käyttämällä ' window.onload ' tapahtuma:
ikkuna. lastina = toiminto ( ) {ikkuna. addEventListener ( 'ladata' , tarkistaa , väärä ) ;
}
Lähtö
Tulos tarkoittaa, että valintaruutu on valittu ja se on poistettu onnistuneesti painikkeiden napsautuksen aikana.
Esimerkki 2: Valitse useita valintaruutuja tai poista niiden valinta
Katsotaanpa esimerkkiä kaikkien valintaruutujen valitsemisesta tai valinnan poistamisesta samanaikaisesti.
Luo ensin HTML-tiedosto ja sitten useita valintaruutuja ja painike, jonka tunnus on ' vaihtaa ', joka vaihtaa valintaruudun valitsemaan tai poistamaan valinnan:
< h3 > Napsauta painiketta valitaksesi kaikki valintaruudut tai poista niiden valinnat h3 >< syötteen tyyppi = 'valintaruutu' luokkaa = 'valintaruutu' > Tarkista tai poista valintani < br >
< syötteen tyyppi = 'valintaruutu' luokkaa = 'valintaruutu' > Tarkista tai poista valintani < br >
< syötteen tyyppi = 'valintaruutu' luokkaa = 'valintaruutu' > Tarkista tai poista valintani < br >
< syötteen tyyppi = 'valintaruutu' luokkaa = 'valintaruutu' > Tarkista tai poista valintani < br >
< syötteen tyyppi = 'valintaruutu' luokkaa = 'valintaruutu' > Tarkista tai poista valintani < br >< br >
< syötteen tyyppi = 'painike' id = 'vaihda' arvo = 'Vaihda valintaruutuja napsauttamalla' >
Vastaava tulos on:
Tämän jälkeen lisää alla oleva koodi JavaScript-tiedostoon tai