Selles kirjutises kirjeldatakse JavaScripti abil märkeruudu märkimise ja märke eemaldamise protseduuri.
Kuidas JavaScripti abil märkeruutu märkida/tühjendada?
JavaScripti märkeruutude märkimiseks või märkeruudu tühistamiseks kasutage kontrollitud ” atribuut. Esmalt hankige viide HTML-elemendile ' märkeruut ' selle määratud ' id ' kasutades ' getElementById() ” meetodit ja seejärel rakenda kontrollitud ” vara selle väärtuse kohta.
Näide 1: märkige ruut Üksik/tühjendage märge
Esmalt looge HTML-fail järgmiste koodiridadega:
< h3 > Märkeruudu märkimiseks või tühjendamiseks klõpsake nuppe h3 >
< sisendi tüüp = 'märkeruut' id = 'märkeruut' > Nõus tingimuste ja tingimustega < br >< br >
< nupu tüüp = 'nupp' onclick = 'Kontrollima()' > Jah nuppu >
< nupu tüüp = 'nupp' onclick = 'uncheck()' > Ei nuppu >
Ülaltoodud koodis:
- Looge märkeruut ID-ga ' märkeruut ', mida kasutatakse elemendile juurdepääsuks' märkeruut ” toimingute tegemiseks.
- Looge kaks nuppu ' Jah ” ja „ Ei ”, et märkida või eemaldada märkeruut, mis käivitab funktsiooni „ Kontrollima() ” ja „ tühjenda märge () ” vastavalt klikisündmusel.
Pärast ülaltoodud koodi täitmist on väljund järgmine:
Järgmisena määrake funktsioonid JavaScripti faili või märgendi märkeruuduga toimingute tegemiseks. Märkeruudu märkimiseks kasutage allolevaid koodiridu:
funktsiooni Kontrollima ( ) {
lase sisestada = dokument. getElementById ( 'märkeruut' ) ;
sisend. kontrollitud = tõsi ;
}
Ülaltoodud koodis:
- Määratlege funktsioon ' Kontrollima() ”, mis käivitab nupu klõpsamise, et märkida ruut.
- Funktsiooni põhiosas hankige märkeruudu viide, kasutades selle ID-d ' märkeruut ' abiga ' getElementById() ' meetodit ja salvestage see muutujasse ' sisend ”.
- Märkige ruut, määrates ' kontrollitud 'vara' tõsi ”.
Märkeruudu tühjendamiseks klõpsates ' Ei ” nuppu, kasutage alltoodud koodi:
funktsiooni tühjendage märge ( ) {lase sisestada = dokument. getElementById ( 'märkeruut' ) ;
sisend. kontrollitud = vale ;
}
Ülaltoodud koodilõik:
- Määratlege funktsioon ' tühjenda märge () ”, mis käivitab märkeruudu tühjendamiseks nupuklõpsamise.
- Funktsiooni põhiosas hankige märkeruudu viide, kasutades selle ID-d ' märkeruut ' abiga ' getElementById() ' meetodit ja salvestage see muutujasse ' sisend ”.
- Tühjendage märkeruut, määrates ' kontrollitud 'vara' vale ”.
Lõpuks määrake funktsioon, mis eemaldab lehe laadimisel vaikimisi märkeruudu, kasutades ' window.onload 'sündmus:
aken. laadimine = funktsiooni ( ) {aken. addEventListener ( 'laadimine' , Kontrollima , vale ) ;
}
Väljund
Väljund tähendab, et märkeruut on nuppudel klõpsamise ajal edukalt märgitud ja eemaldatud.
Näide 2: märkige mitu märkeruutu/tühjendage märge
Vaatame näidet, kuidas kõiki märkeruutusid korraga märkida või neid eemaldada.
Esmalt looge HTML-fail ja seejärel mitu märkeruutu ja nupp ID-ga ' lüliti ', mis lülitab märkeruudu märkimiseks või tühjendamiseks:
< h3 > Kõigi märkeruutude märkimiseks või nende tühjendamiseks klõpsake nuppu h3 >< sisendi tüüp = 'märkeruut' klass = 'märkeruut' > Märkige või tühjendage mind < br >
< sisendi tüüp = 'märkeruut' klass = 'märkeruut' > Märkige või tühjendage mind < br >
< sisendi tüüp = 'märkeruut' klass = 'märkeruut' > Märkige või tühjendage mind < br >
< sisendi tüüp = 'märkeruut' klass = 'märkeruut' > Märkige või tühjendage mind < br >
< sisendi tüüp = 'märkeruut' klass = 'märkeruut' > Märkige või tühjendage mind < br >< br >
< sisendi tüüp = 'nupp' id = 'lülita' väärtus = 'Märkeruutude ümberlülitamiseks klõpsake' >
Vastav väljund on:
Pärast seda lisage JavaScript-faili või märgendisse