Come aggiungere un ingresso casella di controllo con JavaScript

January 4

Come aggiungere un ingresso casella di controllo con JavaScript


Una casella di controllo di input è un elemento in un modulo HTML che alterna un segno di spunta o disattivare ogni volta che l'utente fa clic sulla casella. È dinamicamente possibile aggiungere una casella di controllo di input su un modulo HTML, ad esempio, sulla base del valore di ingresso di un altro campo nel modulo, utilizzando il metodo JavaScript "createElement" per creare la casella di controllo e il metodo "appendChild" per aggiungerlo alla il modulo.

istruzione

1 Creare un nuovo documento HTML utilizzando il blocco note o un editor HTML. Aggiungere le intestazioni HTML al file:

<! DOCTYPE HTML>

<Html lang = "it">

<Head>

<Meta charset = "utf-8">

<Title> Aggiungere Casella di controllo </ title>

</ Head>

2 Creare un modulo HTML all'interno del corpo del documento e dare la forma di un nome in modo che si può facilmente fare riferimento a esso utilizzando JavaScript. Aggiungere una casella di riepilogo per l'utente di selezionare "Sì" o "No" Chiamare una funzione JavaScript per elaborare l'ingresso quando la selezione cambia con l'evento "onChange":

<Body>

<Form name = "myForm">

Si prega di selezionare:

<Select name = "YesOrNo" onChange = "CheckIt ();">

<Option> Seleziona </ option>

<Option> Sì </ option>

<Option> No </ option>

</ Select>

3 Inserire JavaScript prima del tag di chiusura </ head> utilizzando il tag <script>. Inizializzare una variabile globale per indicare se la casella di controllo di input è già stato creato come falso per assicurarsi che la casella di controllo di input non viene creato più di una volta:

<Script>

var hasBox = false;

4 Creare la funzione che viene chiamata quando cambia la selezione dell'utente. Ottenere il valore della selezione dell'utente con la proprietà "selectedIndex" e il valore di testo della risposta con il "testo" di proprietà:

Funzione CheckIt () {

var selection = document.myForm.yesorno.selectedIndex;

var = selectionText document.myForm.yesorno [selezione] .text;

5 Aggiungere la casella di controllo di input per il modulo se la selezione utente è "Sì" e la casella di controllo non è già stato aggiunto al form. Utilizzare il metodo "createElement" per creare un nuovo elemento. Sostituire l'elemento del "innerHTML" con il codice di ingresso per la casella di controllo. Utilizzare il metodo "appendChild" e il nome del modulo per aggiungere il nuovo elemento al form. Impostare il flag globale "true" che la scatola è stata aggiunta:

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

scatola var = document.createElement ( "div");

box.innerHTML = '& lt; ingresso type = "checkbox" name = "checkme"> Controlla qui per confermare';

document.myForm.appendChild (scatola);

hasBox = true;

}

</ Script>