Tento zápis popisuje postup začiarknutia a zrušenia začiarknutia políčka pomocou JavaScriptu.
Ako začiarknuť/zrušiť začiarknutie políčka pomocou JavaScriptu?
Ak chcete začiarknuť alebo zrušiť začiarknutie políčok v jazyku JavaScript, použite „ skontrolované “. Najprv získajte odkaz na prvok HTML „ začiarkavacie políčko “ pomocou prideleného “ id “ pomocou „ getElementById() “ a potom použite metódu „ skontrolované ” majetku na jeho hodnotu.
Príklad 1: Označte/zrušte začiarknutie políčka Single
Najprv vytvorte súbor HTML s nasledujúcimi riadkami kódu:
< h3 > Kliknutím na tlačidlá začiarknite alebo zrušte začiarknutie políčka h3 >
< typ vstupu = 'zaškrtávacie políčko' id = 'zaškrtávacie políčko' > Súhlaste s podmienkami < br < br >
< typ tlačidla = 'tlačidlo' po kliknutí = 'skontrolovať ()' > Áno tlačidlo >
< typ tlačidla = 'tlačidlo' po kliknutí = 'uncheck()' > nie tlačidlo >
Vo vyššie uvedenom kóde:
- Vytvorte začiarkavacie políčko s ID „ začiarkavacie políčko “, ktorý sa použije na prístup k prvku “ začiarkavacie políčko “ na vykonávanie akcií.
- Vytvorte dve tlačidlá, “ Áno “ a „ nie “, začiarknite alebo zrušte začiarknutie políčka, ktoré spustí funkciu „ skontrolovať () “ a „ zrušiť začiarknutie () “, respektíve na udalosť kliknutia.
Po vykonaní vyššie uvedeného kódu bude výstup takýto:
Ďalej definujte funkcie na vykonávanie akcií na začiarkavacom políčku v súbore JavaScript alebo na značke. Ak chcete začiarknuť políčko, použite nasledujúce riadky kódu:
funkciu skontrolovať ( ) {
nechať vstup = dokument. getElementById ( 'začiarkavacie políčko' ) ;
vstup. skontrolované = pravda ;
}
Vo vyššie uvedenom kóde:
- Definujte funkciu ' skontrolovať () “, ktorý spustí kliknutím na tlačidlo začiarknite políčko.
- V tele funkcie získajte odkaz na začiarkavacie políčko pomocou jeho id “ začiarkavacie políčko “ s pomocou „ getElementById() “ a uložte ho do premennej “ vstup “.
- Začiarknite políčko nastavením „ skontrolované ' nehnuteľnosť ' pravda “.
Ak chcete zrušiť začiarknutie políčka kliknutím na „ nie “, použite nižšie uvedený kód:
funkciu zrušiť začiarknutie ( ) {nechať vstup = dokument. getElementById ( 'začiarkavacie políčko' ) ;
vstup. skontrolované = falošný ;
}
Vyššie uvedený útržok kódu:
- Definujte funkciu ' zrušiť začiarknutie () “, ktorý spustí kliknutím na tlačidlo, aby ste zrušili začiarknutie políčka.
- V tele funkcie získajte odkaz na začiarkavacie políčko pomocou jeho id “ začiarkavacie políčko “ s pomocou „ getElementById() “ a uložte ho do premennej “ vstup “.
- Zrušte začiarknutie políčka nastavením „ skontrolované ' nehnuteľnosť ' falošný “.
Nakoniec definujte funkciu, ktorá štandardne zruší začiarknutie políčka pri načítaní stránky pomocou „ okno.načítať “udalosť:
okno. načítať = funkciu ( ) {okno. addEventListener ( 'naložiť' , skontrolovať , falošný ) ;
}
Výkon
Výstup znamená, že začiarkavacie políčko je úspešne začiarknuté a zrušené pri kliknutí na tlačidlá.
Príklad 2: Začiarknite/zrušte začiarknutie viacerých políčok
Pozrime sa na príklad, ako začiarknuť alebo zrušiť začiarknutie všetkých políčok súčasne.
Najprv vytvorte súbor HTML a potom vytvorte viacero začiarkavacích políčok a tlačidlo s ID „ prepnúť “, čím prepnete začiarkavacie políčko na začiarknutie alebo zrušenie začiarknutia:
< h3 > Kliknutím na tlačidlo začiarknite alebo zrušte začiarknutie všetkých políčok h3 >< typ vstupu = 'zaškrtávacie políčko' trieda = 'zaškrtávacie políčko' > Začiarknite alebo zrušte začiarknutie mňa < br >
< typ vstupu = 'zaškrtávacie políčko' trieda = 'zaškrtávacie políčko' > Začiarknite alebo zrušte začiarknutie mňa < br >
< typ vstupu = 'zaškrtávacie políčko' trieda = 'zaškrtávacie políčko' > Začiarknite alebo zrušte začiarknutie mňa < br >
< typ vstupu = 'zaškrtávacie políčko' trieda = 'zaškrtávacie políčko' > Začiarknite alebo zrušte začiarknutie mňa < br >
< typ vstupu = 'zaškrtávacie políčko' trieda = 'zaškrtávacie políčko' > Začiarknite alebo zrušte začiarknutie mňa < br < br >
< typ vstupu = 'tlačidlo' id = 'prepnúť' hodnotu = 'Kliknutím prepnete začiarkavacie políčka' >
Zodpovedajúci výstup bude:
Potom do súboru JavaScript alebo značky