Hvordan legge til en inngang Sjekk boks med Javascript

May 4

En inngangs boksen er et element på en HTML-skjema som veksler en hake av eller på hver gang brukeren klikker på boksen. Du kan dynamisk legge til en inngang i boksen på et HTML-skjema, for eksempel basert på inngangsverdien av et annet felt i form, ved hjelp av Javascript "createElement" metode for å lage i boksen og "appendChild" metode for å legge det til formen.

Bruksanvisning

1 Opprett en ny HTML-dokument med Notepad eller en HTML-editor. Legg HTML overskrifter til filen:

<! DOCTYPE HTML>

<Head>

<Title> Legg Sjekk Box </ title>

</ Head>

2 Opprette et HTML-skjema inne i kroppen av dokumentet og gi form et navn slik at du enkelt kan referere til den ved hjelp av Javascript. Legg en listeboks for brukeren å velge "Ja" eller "Nei" Ring en Javascript-funksjonen til å behandle innspill når endres valget ved hjelp av "onChange" hendelse:

<Body>

Vennligst velg:

</ Velge>

3 Sett Java før den avsluttende </ head> tag med <script> tag. Initial en global variabel for å indikere om input boksen allerede er opprettet som falsk for å sørge for at input boksen ikke blir opprettet mer enn én gang:

Var hasBox = false;

4 Lag funksjonen som kalles når brukeren endres valget. Få verdien av brukervalget med "selectedIndex" eiendom og teksten verdien av svaret med "text" egenskap:

funksjon checkit () {

var selection = document.myForm.yesorno.selectedIndex;

Var selectionText = document.myForm.yesorno [valg] .text;

5 Legg input boksen til skjemaet hvis brukeren valget er "Ja", og i boksen ikke allerede er lagt til skjemaet. Bruk "createElement" metode for å lage et nytt element. Bytt element er "innerhtml" med innspill koden for boksen. Bruk "appendChild" metoden og skjemanavnet for å legge til nytt element til skjemaet. Sett den globale flagget til "true" for at boksen er lagt til:

if (selectionText == "Yes" && !hasBox) {

Var boks = document.createElement ( "div");

box.innerHTML = "& lt; input type =" checkbox "name =" checkme "> Se her for å bekrefte ';

document.myForm.appendChild (boks);

hasBox = true;

}

</ Script>