Una casella di controllo input è un elemento in un modulo HTML che attiva e disattiva un segno di spunta su o fuori ogni volta che l'utente fa clic sulla casella. È possibile aggiungere dinamicamente una casella di controllo input su un modulo HTML, ad esempio basato sul valore di input di un altro campo nel modulo, utilizzando il metodo di "createElement" di JavaScript per creare la casella di controllo e il metodo di "appendChild" per aggiungerlo al form.

Istruzioni

1

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

<! DOCTYPE HTML >

< html lang = "it" >

< head >

< meta charset = "utf-8" >

< title > casella di controllo Aggiungi < / title >

< / head >

2

Creare un modulo HTML all'interno del corpo del documento e dare la forma un nome in modo da poterlo consultare facilmente utilizzando JavaScript. Aggiungere una casella di riepilogo per l'utente per selezionare "Sì" o "No". Chiamare una funzione JavaScript per elaborare l'input quando cambia la selezione utilizzando l'evento "onChange":

< corpo >

< nome modulo = "myForm" >

Si prega di selezionare:

< select nome = "yesorno" onChange="checkit();" >

< opzione > selezionare < / option >

< opzione > Sì < / option >

< opzione > No < / option >

< / selezionare >

3

Inserire codice JavaScript prima del tag di chiusura < / head > utilizzando il tag < script >. Inizializzare una variabile globale per indicare se la casella di controllo input già è stata creata come false per assicurarsi che la casella di controllo input non ottenere creata più di una volta:

< script >

var hasBox = false;

4

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

Function checkit() () {

var selection = document.myForm.yesorno.selectedIndex;

var selectionText= document.myForm.yesorno[selection].text;5

Aggiungere la casella di controllo input per il modulo se la selezione dell'utente è "Sì" e la casella di controllo non è già stato aggiunto al form. Utilizzare il metodo "createElement" per creare un nuovo elemento. Sostituire "innerHTML" dell'elemento con il codice di input 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 su "true", che è stata aggiunta la casella:

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

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

box.innerHTML = '<input type="checkbox" name="checkme"> Check here to confirm';

document.myForm.appendChild(box);

hasBox = true;

}

< / script >