Šajā rakstā ir aprakstīta procedūra, lai pārbaudītu un noņemtu atzīmi no izvēles rūtiņas, izmantojot JavaScript.
Kā atzīmēt/noņemt atzīmi no izvēles rūtiņas, izmantojot JavaScript?
Lai atzīmētu vai noņemtu izvēles rūtiņas JavaScript, izmantojiet “ pārbaudīts ” atribūts. Vispirms iegūstiet atsauci uz HTML elementu ' izvēles rūtiņa 'ar tai piešķirtā' palīdzību id ' izmantojot ' getElementById() ” metodi un pēc tam izmantojiet pārbaudīts ” īpašumu par tās vērtību.
1. piemērs: atzīmējiet vienu izvēles rūtiņu/noņemiet atzīmi no tās
Vispirms izveidojiet HTML failu ar šādām koda rindām:
< h3 > Noklikšķiniet uz pogām, lai atzīmētu vai noņemtu atzīmi no izvēles rūtiņas h3 >
< ievades veids = 'izvēles rūtiņa' id = 'izvēles rūtiņa' > Piekrītu noteikumiem un nosacījumiem < br >< br >
< pogas veids = 'poga' onclick = 'pārbaudīt ()' > Jā pogu >
< pogas veids = 'poga' onclick = 'noņemt atzīmi ()' > Nē pogu >
Iepriekš minētajā kodā:
- Izveidojiet izvēles rūtiņu ar ID ' izvēles rūtiņa ', kas tiks izmantots, lai piekļūtu elementam' izvēles rūtiņa ”, lai veiktu darbības.
- Izveidojiet divas pogas, ' Jā ' un ' Nē ”, lai atzīmētu vai noņemtu atzīmi no izvēles rūtiņas, kas aktivizēs funkciju “ pārbaudīt () ' un ' noņemiet atzīmi () ” attiecīgi klikšķa notikumā.
Pēc iepriekš minētā koda izpildes izvade būs šāda:
Pēc tam definējiet funkcijas, lai veiktu darbības ar JavaScript faila vai taga izvēles rūtiņu. Lai atzīmētu izvēles rūtiņu, izmantojiet tālāk norādītās koda rindas.
funkciju pārbaudiet ( ) {
ļauj ievadīt = dokumentu. getElementById ( 'checkbox' ) ;
ievade. pārbaudīts = taisnība ;
}
Iepriekš minētajā kodā:
- Definējiet funkciju ' pārbaudīt () ”, kas aktivizēs pogas klikšķi, lai atzīmētu izvēles rūtiņu.
- Funkcijas pamattekstā iegūstiet izvēles rūtiņas atsauci, izmantojot tās ID ' izvēles rūtiņa ' ar '' palīdzību getElementById() ' metodi un saglabājiet to mainīgajā ' ievade ”.
- Atzīmējiet izvēles rūtiņu, iestatot “ pārbaudīts 'īpašums' taisnība ”.
Lai noņemtu atzīmi no izvēles rūtiņas, noklikšķinot uz ' Nē ” pogu, izmantojiet tālāk norādīto kodu:
funkciju noņemiet atzīmi ( ) {ļauj ievadīt = dokumentu. getElementById ( 'checkbox' ) ;
ievade. pārbaudīts = viltus ;
}
Iepriekš minētais koda fragments:
- Definējiet funkciju ' noņemiet atzīmi () ”, kas aktivizēs pogas klikšķi, lai noņemtu atzīmi no izvēles rūtiņas.
- Funkcijas pamattekstā iegūstiet izvēles rūtiņas atsauci, izmantojot tās ID ' izvēles rūtiņa ' ar '' palīdzību getElementById() ' metodi un saglabājiet to mainīgajā ' ievade ”.
- Noņemiet atzīmi no izvēles rūtiņas, iestatot “ pārbaudīts 'īpašums' viltus ”.
Visbeidzot, definējiet funkciju, lai pēc noklusējuma noņemtu atzīmi no izvēles rūtiņas lapas ielādes laikā, izmantojot “ window.onload ”pasākums:
logs. ielāde = funkciju ( ) {logs. addEventListener ( 'slodze' , pārbaudiet , viltus ) ;
}
Izvade
Izvade nozīmē, ka, noklikšķinot uz pogām, izvēles rūtiņa ir veiksmīgi atzīmēta un noņemta.
2. piemērs: atzīmējiet/noņemiet atzīmi no vairākām izvēles rūtiņām
Apskatīsim piemēru, kā vienlaikus atzīmēt vai noņemt atzīmes no visām izvēles rūtiņām.
Vispirms izveidojiet HTML failu un pēc tam izveidojiet vairākas izvēles rūtiņas un pogu ar ID ' pārslēgt ”, kas pārslēgs izvēles rūtiņu, lai atzīmētu vai noņemtu atzīmi:
< h3 > Noklikšķiniet uz pogas, lai atzīmētu visas izvēles rūtiņas vai noņemtu atzīmes h3 >< ievades veids = 'izvēles rūtiņa' klasē = 'izvēles rūtiņa' > Atzīmējiet vai noņemiet atzīmi no manis < br >
< ievades veids = 'izvēles rūtiņa' klasē = 'izvēles rūtiņa' > Atzīmējiet vai noņemiet atzīmi no manis < br >
< ievades veids = 'izvēles rūtiņa' klasē = 'izvēles rūtiņa' > Atzīmējiet vai noņemiet atzīmi no manis < br >
< ievades veids = 'izvēles rūtiņa' klasē = 'izvēles rūtiņa' > Atzīmējiet vai noņemiet atzīmi no manis < br >
< ievades veids = 'izvēles rūtiņa' klasē = 'izvēles rūtiņa' > Atzīmējiet vai noņemiet atzīmi no manis < br >< br >
< ievades veids = 'poga' id = 'pārslēgt' vērtību = 'Noklikšķiniet, lai pārslēgtu izvēles rūtiņas' >
Atbilstošā izvade būs:
Pēc tam JavaScript failā vai tagā