A caixa de seleção OnClick Events in JavaScript

A caixa de seleção é um elemento de entrada HTML que permite ao usuário escolher uma das várias opções. Como nos formulários HTML, há uma caixa de seleção para gênero, homem ou mulher. Ou às vezes, os termos e condições devem ser aprovados antes de enviar o formulário. O "ONCLICK”O evento será anexado à caixa de seleção e será acionado ou executado quando uma caixa de seleção for clicada.

Este artigo demonstrará o evento OnClick em JavaScript.

A caixa de seleção OnClick Events in JavaScript

O "ONCLICK”É um evento que será acionado quando o usuário verificar a caixa de seleção. O evento OnClick será anexado à caixa de seleção por:

• Usando o atributo onclick na tag html
• Aplicando uma função no atributo OnClick de um elemento HTML em JavaScript
• Adicionando explicitamente um ouvinte de evento no “cliqueEvento

Vamos usar tudo isso por um.

Exemplo 1: Evento OnClick
Crie uma caixa de seleção em um arquivo HTML com o ID “concordar”E anexe um“ONCLICK”Evento com ele que executará a função CheckClickfunc () Escrito na parte JavaScript:

Propriedade OnClick em HTML chamando a função JavaScript

Concordo termos e condições

Use as linhas de código abaixo em um arquivo JavaScript:

função checkclickfunc ()

Caixa de seleção var = documento.getElementById ('concordo');
if (caixa de seleção.verificado == true)

alerta ("Caixa de seleção está clicada");

No código acima,

• Crie a função CheckClickfunc () que deve ser executado ao clicar na caixa de seleção.
• Usando o “getElementById ()”Método, recupere a caixa de seleção por seu ID,“concordar”.
• Verifique o status da caixa de seleção usando o “verificado”Atributo.
• Se é "verdadeiro", Mostre uma mensagem de alerta"Caixa de seleção é clicada”.

Saída

Exemplo 2: Evento OnClick de caixa de seleção aplicando uma função no atributo OnClick de um elemento HTML em JavaScript
Neste exemplo, JavaScript será usado para dar um valor ao ONCLICK atributo do elemento html e não na tag html.

Crie uma caixa de seleção e atribua um ID a ele que mais tarde será acessado em JavaScript:

Caixa de seleção OnClick usando JavaScript

Concordo termos e condições

Na etapa seguinte, a caixa de seleção será acessada usando seu ID “concordar" e um "ONCLICK”O atributo será anexado a ele. Na caixa de seleção Clique, a função definida será executada e uma mensagem de alerta será mostrada:

documento.getElementById ("concordo").OnClick = função checkClickfunc ()
alerta ("Caixa de seleção está clicada");

A saída correspondente será:

Exemplo 3: Evento OnClick de caixa de seleção adicionando explicitamente o ouvinte de eventos no evento "Click"
Aqui, a caixa de seleção OnClick será definida usando o JavaScript “addEventListener ()”Método:

Caixa de seleção OnClick usando JavaScript através do addEventListener

Concordo termos e condições

No arquivo JavaScript, use o código fornecido:

documento.getElementById ("concordo").addEventListener ("clique", checkclickfunc);
função checkClickfunc ()
alerta ("Caixa de seleção está clicada");

No trecho de código acima,

• Primeiro, busque a caixa de seleção usando seu ID e depois anexe um “addEventListener ()”Método, passando um“clique”Evento e uma função“CheckClickfunc”Que será chamado na caixa de seleção Clique.
• Defina uma função “CheckClickfunc ()”, Que será acionado ao clicar na caixa de seleção e mostra uma mensagem de alerta:

Saída

Conclusão

A caixa de seleção OnClick Events são eventos realizados quando uma caixa de seleção é marcada como “verificado”. Esses eventos não são aplicados por padrão em um elemento da caixa de seleção do documento HTML. Portanto, o usuário deve adicionar manualmente os eventos para realizar funcionalidade específica. Existem três maneiras diferentes de adicionar um “ONCLICK”Evento e executando uma ação sobre esse evento com a ajuda do JavaScript. Este artigo explica esses três métodos junto com exemplos.