JavaScript kan brukes til å manipulere oppførselen til HTML -elementer på en side. Et av de mest brukte elementene ville være inngangs taggen . Inngangen brukes til å opprette et interaktivt brukergrensesnitt (UI) med det formål å ta informasjon fra brukeren.

Inngangskoden har forskjellige typer. Noen av disse typene inkluderer en knapp, bilde, avkrysningsrute, radiokasse og så videre. Annet enn typer er det forskjellige attributter av Inngangskode . Disse attributtene er kompatible med visse typer, for eksempel krysset av Attributt er ikke kompatibel med knappetype, da den bare er kompatibel med en avkrysningsrute eller alternativknapp.

Avkrysningsrute og avmerket eiendom

Når du oppretter et skjema for å ta informasjon fra brukeren, bruker du ganske ofte en inngangstype som heter a avkrysningsrute. Dette avkrysningsrute utnytter bare ett attributt, og det er den sjekket attributtet \ eiendom. Veldig kort skal vi se hvordan denne avkrysningsruten fungerer, og så skal vi manipulere den ordentlig ved hjelp av JavaScript.

La oss starte med å vise en enkel avkrysningsrute på en HTML -side. Bruk følgende kode for å opprette en avkrysningsrute:

Dette er en avmerkingsboks

Som du ser, opprettet vi en inngangsmerke og ga det et navn og id, og teksten som skal vises ved siden av.

Full kodebit for bedre demonstrasjon vil gå slik:

Linuxhint Tutorial

Avkrysningsrute avkrysning av eiendomsmanipulering ved hjelp av JavaScript


Dette er en avmerkingsboks

Utgangen er:

Som vi kan se, har vi en avkrysningsrute som vises på skjermen. La oss legge til den "sjekket" egenskapen slik at avmerkingsboksen allerede er merket når siden laster. For å legge til egenskapen "sjekket", bruk følgende linje i koden din:

Dette er en avmerkingsboks

Vi kan bekrefte dette ved å gå til nettleserens utviklerverktøy og deretter inn i kategorien Egenskaper, hvor vi kan se eiendommen “krysset av”Og dens verdi som:

Vi kan endre den sjekket egenskapen ved å klikke på selve avkrysningsruten, som:

Men hva om vi vil bruke JavaScript for å manipulere den sjekket eiendommen.

Hvordan endre sjekket eiendom ved hjelp av JavaScript

For å bruke JavaScript for å endre elementer på HTML skal vi lage en trigger. En trigger kan være hva som helst, det kan være en hendelse, eller museplassering, eller en knapp. Vi vil kreve to knapper. Hvorav den ene vil endre “krysset av”Eiendoms verdi til True, og den andre til å endre den til“ False ”

La oss først lage de to knappene ved hjelp av følgende linjer.

Kryss av
Fjern merket

Disse linjene ville opprette de to knappene på skjermen som:

På tide å binde disse knappene med funksjonene som vi har definert inne i “ved trykk”Eiendom.

For å opprette disse to funksjonene, bruk følgende kommandoer inne i skriptetoden .

Kjør filen igjen og klikk på disse knappene for å undersøke atferden til avmerkingsboksen.

Du vil ha denne oppførselen.

Som du ser, endrer vi nå krysset av Eiendoms verdi av avkrysningsruten ved hjelp av JavaScript.

Konklusjon

JavaScript kan brukes til å manipulere verdien av "krysset av”Eiendom av en avkrysningsrute inne i stikkord. HTML -elementer blir ofte manipulert ved hjelp av JavaScript, og disse manipulasjonene blir ofte gjort som et resultat av noe handling, kanskje etter at brukeren trykker på en knapp eller klikk et sted på skjermen. Vi gikk kort gjennom hva avkrysningsbokser er, hvordan du oppretter dem, hva er deres "sjekkede" egenskap og hvordan man kan manipulere den egenskapen når brukeren trykker på en knapp ved hjelp av JavaScript.