Tässä artikkelissa esitellään tavat, joilla voit tarkistaa ja poistaa kaikki valintaruudut JavaScriptin avulla.
Kuinka valita ja poistaa kaikki valintaruudut JavaScriptillä?
Voit valita ja poistaa valinnan kaikista JavaScriptin valintaruuduista käyttämällä:
- ' document.getElementsByName ”-menetelmä valintaruuduilla
- ' document.getElementsByName ”-menetelmä painikkeilla
Mainittuja lähestymistapoja käsitellään nyt yksitellen!
Tapa 1: Tarkista ja poista kaikki valintaruudut JavaScriptissa käyttämällä 'document.getElementsByName()' -menetelmää 'Checkboxes'
' document.getElementsByName() ”-menetelmä palauttaa elementit, joilla on määritetty nimi argumenteissaan. Tätä menetelmää käytetään kunkin valintaruudun arvon hakemiseen välitetyn nimen avulla.
Käydään läpi seuraava esimerkki esittelyä varten.
Esimerkki
Ensin syöttötyyppi määritetään muodossa ' valintaruutu ” ja jokaiselle valintaruudulle annetaan tietty nimi ja arvo:
< syötteen tyyppi = 'valintaruutu' nimi = 'vain' arvo = 'Python' > Python < br />< syötteen tyyppi = 'valintaruutu' nimi = 'vain' arvo = 'Java' > Java < br />
< syötteen tyyppi = 'valintaruutu' nimi = 'vain' arvo = 'JavaScript' > JavaScript < br />
Lisää nyt ylimääräinen valintaruutu arvolla ' Tarkista kaikki ' ja liitä ' klikkaamalla() ' -tapahtuma tällä valintaruudulla, joka toimii siten, että valintaruutua napsauttaessa ' checkEi valittu ()' -menetelmää kutsutaan objektilla ' Tämä 'argumenttina:
< syötteen tyyppi = 'valintaruutu' klikkaamalla = 'checkUncheck(this)' /> Tarkista kaikki < br />
Määritä sen jälkeen funktio nimeltä ' checkUncheck() ' JavaScript-tiedostossa, muuttujalla ' valintaruutu 'argumenttina. Siirry nyt valintaruutujen arvoihin käyttämällä ' document.getElementsByName() ' -menetelmää ja aseta ' nimi ”-attribuutti argumenttina.
Käytä lopuksi ' varten '-silmukka toistaa kaikkia valintaruutujen arvoja ja käyttää ' tarkistettu ” -ominaisuutta merkitäksesi ne kaikki valituiksi:
toimintotarkistus Poista valinta ( valintaruutu ) {saada = asiakirja. getElementsByName ( 'vain' ) ;
varten ( oli sisällä = 0 ; i < saada. pituus ; i ++ ) {
saada [ i ] . tarkistettu = valintaruutu. tarkistettu ; }
}
Kuten näet, kun ' Tarkista kaikki ” -valintaruutu on merkitty, kaikki muut valintaruudut on myös merkitty valituiksi:
Tapa 2: Valitse ja poista kaikki valintaruudut JavaScriptissa käyttämällä 'document.getElementsByName()' -menetelmää 'Buttons'
' document.getElementsByName() ” -menetelmä, kuten edellisessä menetelmässä käsiteltiin, hakee elementit määritetyllä nimellä argumenteissaan. Sitä voidaan käyttää kaikkien Web-sivulle lisättyjen valintaruutujen valitsemiseen tai poistamiseen.
Katso seuraava esimerkki esittelyä varten.
Esimerkki
Nyt sisällytämme kaksi painiketta molemmille ' Tarkistaa kaikki ' ja ' Poista valinta Kaikki ”toiminnot. Liitä sitten ' klikkaamalla ”-tapahtuma molemmilla painikkeilla, jotka pääsevät erikseen määritettyihin toimintoihin:
< syötteen tyyppi = 'painike' klikkaamalla = 'tarkistaa()' arvo = 'Tarkistaa kaikki' />< syötteen tyyppi = 'painike' klikkaamalla = 'uncheck()' arvo = 'Poista kaikki valinnat' />
Määritä seuraavaksi funktio nimeltä ' tarkistaa() ' ja käytä ' document.getElementsByName ' -menetelmä, jolla on ' nimi ”-attribuutti. Toista sitten ' varten ” kiertää kaikkia edellisessä menetelmässä käsiteltyjä valintaruutujen arvoja.
Lisäksi, kun vastaavaa painiketta napsautetaan, ' tarkistettu '-ominaisuus merkitsee kaikki valintaruudut ja asettaa valituksi tilaksi ' totta ':
toiminnan tarkistus ( ) {olla vuohi = asiakirja. getElementsByName ( 'tarkistaa' ) ;
varten ( oli sisällä = 0 ; i < saada. pituus ; i ++ ) {
saada [ i ] . tarkistettu = totta ; }
}
Määritä seuraavaksi funktio nimeltä ' poista valinta() ' ja lisää siihen käänteinen toiminto merkitäksesi valitun ruudun ominaisuuden ' väärä ':
toiminto poista valinta ( ) {olla vuohi = asiakirja. getElementsByName ( 'tarkistaa' ) ;
varten ( oli sisällä = 0 ; i < saada. pituus ; i ++ ) {
saada [ i ] . tarkistettu = väärä ; }
}
Tulosteessa näkyy, että lisätyt painikkeet toimivat täydellisesti:
Olemme tarjonneet helpoimmat tavat tarkistaa kaikki valintaruudut ja poistaa niiden valinnat JavaScriptin avulla.
Johtopäätös
Tarkistaaksesi kaikki valintaruudut ja poistaaksesi valinnat JavaScriptin avulla, käytä ' document.getElementsByName() ' menetelmä '' valintaruudut ' lisätäksesi valintaruudun ja käyttääksesi toimintoa, jolloin valintaruudut valitaan tai käytä samaa menetelmää ' Painikkeet ” sisältää kaksi painiketta erikseen kaikkien määritettyjen arvojen tarkistamiseksi ja poistamiseksi. Tämä kirjoitus selosti menetelmiä kaikkien valintaruutujen tarkistamiseksi ja poistamiseksi JavaScriptin avulla.