Tento zápis popisuje postup zaškrtnutí a zrušení zaškrtnutí políčka pomocí JavaScriptu.
Jak zaškrtnout/zrušit zaškrtnutí políčka pomocí JavaScriptu?
Chcete-li zaškrtnout nebo zrušit zaškrtnutí políček v JavaScriptu, použijte „ kontrolovány ' atribut. Nejprve získejte odkaz na prvek HTML „ zaškrtávací políčko “ s pomocí jeho přiděleného “ id ' za použití ' getElementById() “ metodu a poté použijte „ kontrolovány ” majetku na jeho hodnotu.
Příklad 1: Zaškrtněte/zrušte zaškrtnutí políčka Single
Nejprve vytvořte soubor HTML s následujícími řádky kódu:
< h3 > Klepnutím na tlačítka zaškrtněte nebo zrušte zaškrtnutí políčka h3 >
< Typ vstupu = 'zaškrtávací políčko' id = 'zaškrtávací políčko' > Souhlas s podmínkami < br < br >
< typ tlačítka = 'knoflík' při kliknutí = 'šek()' > Ano knoflík >
< typ tlačítka = 'knoflík' při kliknutí = 'uncheck()' > ani náhodou knoflík >
Ve výše uvedeném kódu:
- Vytvořte zaškrtávací políčko s id „ zaškrtávací políčko “, který bude použit pro přístup k prvku “ zaškrtávací políčko “ k provádění akcí.
- Vytvořte dvě tlačítka, “ Ano ' a ' ani náhodou “, pro zaškrtnutí nebo zrušení zaškrtnutí políčka, které spustí funkci “ šek() ' a ' zrušit zaškrtnutí () ” respektive na událost kliknutí.
Po provedení výše uvedeného kódu bude výstup vypadat takto:
Dále definujte funkce pro provádění akcí na zaškrtávacím políčku v souboru JavaScript nebo značce. Pro zaškrtnutí políčka použijte následující řádky kódu:
funkce šek ( ) {
nechat vstup = dokument. getElementById ( 'zaškrtávací políčko' ) ;
vstup. kontrolovány = skutečný ;
}
Ve výše uvedeném kódu:
- Definujte funkci ' šek() “, která spustí kliknutím na tlačítko pro zaškrtnutí políčka.
- Uvnitř těla funkce získejte odkaz na zaškrtávací políčko pomocí jeho id “ zaškrtávací políčko “ s pomocí „ getElementById() “ metodu a uložte ji do proměnné “ vstup “.
- Zaškrtněte políčko nastavením „ kontrolovány ' vlastnictví ' skutečný “.
Chcete-li zrušit zaškrtnutí políčka kliknutím na „ ani náhodou “, použijte níže uvedený kód:
funkce zrušte zaškrtnutí ( ) {nechat vstup = dokument. getElementById ( 'zaškrtávací políčko' ) ;
vstup. kontrolovány = Nepravdivé ;
}
Výše uvedený fragment kódu:
- Definujte funkci ' zrušit zaškrtnutí () “, které spustí kliknutím na tlačítko pro zrušení zaškrtnutí políčka.
- Uvnitř těla funkce získejte odkaz na zaškrtávací políčko pomocí jeho id “ zaškrtávací políčko “ s pomocí „ getElementById() “ metodu a uložte ji do proměnné “ vstup “.
- Zrušte zaškrtnutí políčka nastavením „ kontrolovány ' vlastnictví ' Nepravdivé “.
Nakonec definujte funkci pro zrušení zaškrtnutí políčka ve výchozím nastavení při načítání stránky pomocí „ okno.načtení ' událost:
okno. načíst = funkce ( ) {okno. addEventListener ( 'zatížení' , šek , Nepravdivé ) ;
}
Výstup
Výstup znamená, že zaškrtávací políčko bylo úspěšně zaškrtnuto a odškrtnuto při kliknutí na tlačítka.
Příklad 2: Zaškrtněte/zrušte zaškrtnutí více zaškrtávacích políček
Podívejme se na příklad, jak zaškrtnout nebo zrušit zaškrtnutí všech políček současně.
Nejprve vytvořte soubor HTML a poté vytvořte několik zaškrtávacích políček a tlačítko s id „ přepnout “, která přepne zaškrtávací políčko pro zaškrtnutí nebo zrušení zaškrtnutí:
< h3 > Klepnutím na tlačítko zaškrtněte nebo zrušte zaškrtnutí všech políček h3 >< Typ vstupu = 'zaškrtávací políčko' třída = 'zaškrtávací políčko' > Zaškrtněte nebo zrušte zaškrtnutí mě < br >
< Typ vstupu = 'zaškrtávací políčko' třída = 'zaškrtávací políčko' > Zaškrtněte nebo zrušte zaškrtnutí mě < br >
< Typ vstupu = 'zaškrtávací políčko' třída = 'zaškrtávací políčko' > Zaškrtněte nebo zrušte zaškrtnutí mě < br >
< Typ vstupu = 'zaškrtávací políčko' třída = 'zaškrtávací políčko' > Zaškrtněte nebo zrušte zaškrtnutí mě < br >
< Typ vstupu = 'zaškrtávací políčko' třída = 'zaškrtávací políčko' > Zaškrtněte nebo zrušte zaškrtnutí mě < br < br >
< Typ vstupu = 'knoflík' id = 'přepnout' hodnota = 'Kliknutím přepnete zaškrtávací políčka' >
Odpovídající výstup bude:
Poté do souboru JavaScript nebo značky