JavaScript può essere usato per manipolare il comportamento degli elementi HTML di una pagina. Uno degli elementi più comunemente usati sarebbe il tag di input . L'input viene utilizzato per creare un'interfaccia utente interattiva (UI) con lo scopo di prendere informazioni dall'utente.

Il tag di input ha vari tipi. Alcuni di questi tipi includono un pulsante, l'immagine, la casella di controllo, la radio e così via. Oltre ai tipi, ci sono vari attributi del Tag di input . Questi attributi sono compatibili con alcuni tipi, ad esempio il controllato L'attributo non è compatibile con il tipo di pulsante in quanto è compatibile solo con una casella di controllo o un pulsante di opzione.

Casella di controllo e proprietà controllata

Quando si crea un modulo per prendere informazioni dall'utente, abbastanza spesso si utilizza un tipo di input chiamato A Casella di controllo. Questo Casella di controllo sfrutta un solo attributo e questo è l'attributo selezionato \ proprietà. Molto brevemente, vedremo come funziona questa casella di controllo, e poi la manipoteremo correttamente usando JavaScript.

Iniziamo visualizzando una semplice casella di controllo in una pagina HTML. Utilizzare il seguente codice per la creazione di una casella di controllo:

Questa è una casella di controllo

Come puoi vedere, abbiamo creato un tag di input e gli diede un nome e un documento d'identità e il testo da visualizzare accanto ad esso.

Lo snippet di codice completo per una migliore dimostrazione sarebbe così:

Tutorial Linuxhint

Casella di controllo Manipolazione della proprietà controllata utilizzando JavaScript


Questa è una casella di controllo

L'output è:

Come possiamo vedere, abbiamo una casella di controllo visualizzata sullo schermo. Aggiungiamo la proprietà "selezionata" in modo che la casella di controllo sia già contrassegnata quando la pagina si carica. Per l'aggiunta della proprietà "selezionata", utilizzare la riga seguente nel codice:

Questa è una casella di controllo

Possiamo confermarlo anche andando agli strumenti per sviluppatori del browser e poi nella scheda Proprietà, dove possiamo vedere la proprietà "controllato"E il suo valore come:

Possiamo modificare la proprietà selezionata facendo clic sulla casella di controllo stessa, come:

Ma cosa succede se vogliamo usare JavaScript per manipolare la proprietà controllata.

Come modificare la proprietà controllata usando JavaScript

Per usare JavaScript per modificare gli elementi sull'HTML creeremo un trigger. Un grilletto può essere qualsiasi cosa, può essere un evento, obocalizzazione del mouse o un pulsante. Richiederemo due pulsanti. Uno dei quali cambierà il "controllato"Valore della proprietà a True, e l'altro per cambiarlo in" Falso "

Creiamo innanzitutto i due pulsanti usando le seguenti righe.

Controllo
Deselezionare

Queste righe creerebbero i due pulsanti sullo schermo come:

Tempo per legare questi pulsanti con le funzioni che abbiamo definito all'interno del "al clic" proprietà.

Per creare queste due funzioni, utilizzare i seguenti comandi all'interno del tag script .

Esegui nuovamente il file e fai clic su questi pulsanti per esaminare il comportamento della casella di controllo.

Avrai questo comportamento.

Come puoi vedere, ora stiamo cambiando il controllato Valore della proprietà della casella di controllo utilizzando JavaScript.

Conclusione

JavaScript può essere usato per manipolare il valore di "controllato"Proprietà di a Casella di controllo dentro il etichetta. Gli elementi HTML vengono spesso manipolati usando JavaScript e queste manipolazioni vengono spesso eseguite a seguito di una certa azione, forse dopo che l'utente ha premuto un pulsante o fa clic da qualche parte sullo schermo. Abbiamo superato brevemente quali sono le caselle di controllo, come crearle, qual è la loro proprietà "controllata" e come manipolare quella proprietà quando l'utente preme un pulsante usando JavaScript.