Denna uppskrivning kommer att beskriva proceduren för att markera och avmarkera kryssrutan med JavaScript.
Hur markerar/avmarkerar jag kryssrutan med JavaScript?
För att markera eller avmarkera kryssrutorna i JavaScript, använd ' kontrollerade ' attribut. Få först referensen till HTML-elementet ' kryssruta ” med hjälp av dess tilldelade ” id ' använda ' getElementById() '-metoden och använd sedan ' kontrollerade ” egendom på dess värde.
Exempel 1: Markera/avmarkera rutan Single
Skapa först en HTML-fil med följande kodrader:
< h3 > Klicka på knapparna för att markera eller avmarkera kryssrutan h3 >
< ingångstyp = 'kryssruta' id = 'kryssruta' > Håller med om villkoren < br >< br >
< knapptyp = 'knapp' onclick = 'kolla upp()' > Ja knapp >
< knapptyp = 'knapp' onclick = 'avmarkera()' > Nej knapp >
I ovanstående kod:
- Skapa en kryssruta med id ' kryssruta ' som kommer att användas för att komma åt elementet ' kryssruta ” för att utföra åtgärder.
- Skapa två knappar, ' Ja ' och ' Nej ', för att markera eller avmarkera kryssrutan som kommer att utlösa funktionen ' kolla upp() ' och ' avmarkera () ” respektive på klickhändelsen.
Efter att ha kört ovanstående kod kommer utdata att se ut så här:
Därefter definierar du funktionerna för att utföra åtgärder på kryssrutan i JavaScript-filen eller taggen. För att markera kryssrutan, använd nedanstående kodrader:
fungera kolla upp ( ) {
låt input = dokumentera. getElementById ( 'kryssruta' ) ;
inmatning. kontrollerade = Sann ;
}
I ovanstående kod:
- Definiera en funktion ' kolla upp() ” som kommer att utlösa ett knappklick för att markera kryssrutan.
- Inuti kroppen av funktionen, hämta referensen till kryssrutan med dess id ' kryssruta ' med hjälp av ' getElementById() ' metod och lagra den i en variabel ' inmatning ”.
- Markera kryssrutan genom att ställa in ' kontrollerade ' fast egendom ' Sann ”.
För att avmarkera kryssrutan genom att klicka på ' Nej ”-knappen, använd nedanstående kod:
fungera avmarkera ( ) {låt input = dokumentera. getElementById ( 'kryssruta' ) ;
inmatning. kontrollerade = falsk ;
}
Ovanstående kodavsnitt:
- Definiera en funktion ' avmarkera () ” som kommer att utlösa ett knappklick för att avmarkera kryssrutan.
- Inuti kroppen av funktionen, hämta referensen till kryssrutan med dess id ' kryssruta ' med hjälp av ' getElementById() ' metod och lagra den i en variabel ' inmatning ”.
- Avmarkera kryssrutan genom att ställa in ' kontrollerade ' fast egendom ' falsk ”.
Slutligen, definiera en funktion för att avmarkera kryssrutan som standard vid sidladdningen med hjälp av ' window.onload ' händelse:
fönster. ladda = fungera ( ) {fönster. addEventListener ( 'ladda' , kolla upp , falsk ) ;
}
Produktion
Utdata betyder att kryssrutan är markerad och avmarkerad framgångsrikt när du klickar på knapparna.
Exempel 2: Markera/avmarkera flera kryssrutor
Låt oss se ett exempel på hur du markerar eller avmarkerar alla kryssrutor samtidigt.
Skapa först en HTML-fil och skapa sedan flera kryssrutor och en knapp med id ' växla ' som kommer att växla kryssrutan för att markera eller avmarkera:
< h3 > Klicka på knappen för att markera eller avmarkera alla kryssrutor h3 >< ingångstyp = 'kryssruta' klass = 'kryssruta' > Markera eller avmarkera mig < br >
< ingångstyp = 'kryssruta' klass = 'kryssruta' > Markera eller avmarkera mig < br >
< ingångstyp = 'kryssruta' klass = 'kryssruta' > Markera eller avmarkera mig < br >
< ingångstyp = 'kryssruta' klass = 'kryssruta' > Markera eller avmarkera mig < br >
< ingångstyp = 'kryssruta' klass = 'kryssruta' > Markera eller avmarkera mig < br >< br >
< ingångstyp = 'knapp' id = 'växla' värde = 'Klicka för att växla mellan kryssrutorna' >
Motsvarande utgång kommer att vara:
Därefter lägger du till koden nedan i en JavaScript-fil eller