La casella di controllo OnClick eventi in JavaScript

La casella di controllo è un elemento di input HTML che consente all'utente di scegliere una delle diverse opzioni. Come per i moduli HTML, c'è una casella di controllo per genere, maschio o femmina. O a volte, i termini e le condizioni devono essere approvati prima di presentare il modulo. IL "al clic"L'evento sarà allegato alla casella di controllo e verrà attivato o eseguito quando si fa clic su una casella di controllo.

Questo articolo dimostrerà l'evento di controllo OnClick in JavaScript.

La casella di controllo OnClick eventi in JavaScript

IL "al clic"È un evento che verrà attivato quando l'utente controlla la casella di controllo. L'evento OnClick sarà allegato con la casella di controllo da:

• Utilizzando l'attributo OnClick all'interno del tag HTML
• Applicazione di una funzione sull'attributo OnClick di un elemento HTML in JavaScript
• Aggiungere esplicitamente un ascoltatore di eventi sul "clic"Evento

Usiamo tutti questi per uno.

Esempio 1: casella di controllo OnClick Evento utilizzando l'attributo OnClick all'interno del tag HTML
Crea una casella di controllo in un file HTML con l'ID "Essere d'accordo”E allegare un"al clic"Evento con esso che eseguirà la funzione CheckClickFunc () Scritto nella parte JavaScript:

Proprietà OnClick in HTML chiamando la funzione JavaScript

Concorda termini e condizioni

Usa le righe seguenti del codice in un file JavaScript:

funzione checkClickFunc ()

Var CheckBox = Documento.getElementById ('ACCOUNT');
Se (casella di controllo.controllato == vero)

Avviso ("La casella di controllo viene cliccata");

Nel codice sopra,

• Crea la funzione CheckClickFunc () che deve essere eseguito facendo clic sulla casella di controllo.
• Usando il "getElementById ()"Metodo, recuperare la casella di controllo dal suo ID,"Essere d'accordo".
• Controlla lo stato della casella di controllo utilizzando "controllato"Attributo.
• Se è "VERO", Mostra un messaggio di allerta"La casella di controllo viene cliccata".

Produzione

Esempio 2: casella di controllo OnClick Evento applicando una funzione sull'attributo OnClick di un elemento HTML in JavaScript
In questo esempio, JavaScript verrà utilizzato per dare un valore al al clic attributo dell'elemento html anziché nel tag html.

Crea una casella di controllo e assegna un ID ad essa a cui si accede successivamente in JavaScript:

Casella di controllo OnClick usando JavaScript

Concorda termini e condizioni

Nel passaggio seguente, la casella di controllo sarà accessibile utilizzando il suo ID "Essere d'accordo" e un "al clic"L'attributo sarà allegato ad esso. Al momento della casella di controllo, la funzione definita verrà eseguita e verrà visualizzato un messaggio di avviso:

documento.getElementById ("ACCOTTO").OnClick = function checkClickFunc ()
Avviso ("La casella di controllo viene cliccata");

L'output corrispondente sarà:

Esempio 3: Casella di controllo OnClick Evento aggiungendo esplicitamente l'evento eventi sull'evento "clicca"
Qui, la casella di controllo OnClick verrà impostata utilizzando JavaScript "addEventListener ()" metodo:

Casella di controllo OnClick utilizzando JavaScript tramite AddeventListener

Concorda termini e condizioni

Nel file JavaScript, utilizzare il codice dato:

documento.getElementById ("ACCOTTO").addEventListener ("Click", CheckClickFunc);
funzione checkClickFunc ()
Avviso ("La casella di controllo viene cliccata");

Nello snippet di codice sopra,

• Innanzitutto, prendi la casella di controllo utilizzando il suo ID e quindi allega un "addEventListener ()Metodo "passando un"clic"Evento e una funzione"CheckClickFunc"Che verrà chiamato sulla casella di controllo Fare clic.
• Definire una funzione "CheckClickFunc ()", Che verrà attivato mentre fai clic sulla casella di controllo e mostra un messaggio di avviso:

Produzione

Conclusione

La casella di controllo OnClick eventi sono eventi eseguiti quando una casella di controllo è contrassegnata come "controllato". Questi eventi non sono applicati per impostazione predefinita su un elemento della casella di controllo del documento HTML. Pertanto, l'utente deve aggiungere manualmente gli eventi per eseguire funzionalità specifiche. Esistono tre modi diversi per aggiungere un "al clic"Evento ed eseguire un'azione su quell'evento con l'aiuto di JavaScript. Questo articolo spiega questi tre metodi insieme agli esempi.