JavaScript pode ser usado para manipular o comportamento dos elementos HTML de uma página. Um dos elementos mais usados ​​seria a tag de entrada . A entrada é usada para criar uma interface de usuário interativa (UI) com o objetivo de obter informações do usuário.

A tag de entrada tem vários tipos. Alguns desses tipos incluem um botão, imagem, caixa de seleção, caixa de rádio e assim por diante. Além dos tipos, existem vários atributos do tag de entrada . Esses atributos são compatíveis com certos tipos, por exemplo, o verificado O atributo não é compatível com o tipo de botão, pois é compatível apenas com uma caixa de seleção ou um botão de rádio.

Caixa de seleção e propriedade verificada

Quando você cria um formulário para obter informações do usuário, muitas vezes você está usando um tipo de entrada chamado a Caixa de seleção. Esse Caixa de seleção aproveita apenas um atributo e esse é o atributo verificado \ propriedade. Muito brevemente, vamos ver como essa caixa de seleção funciona e depois vamos manipulá -la corretamente usando JavaScript.

Vamos começar exibindo uma caixa de seleção simples em uma página HTML. Use o código a seguir para criar uma caixa de seleção:

Esta é uma caixa de seleção

Como você pode ver, criamos uma tag de entrada e deu um nome e id, e o texto para exibir ao lado.

O trecho de código completo para melhor demonstração seria assim:

Tutorial Linuxhint

Caixa de seleção Manipulação da propriedade verificada usando JavaScript


Esta é uma caixa de seleção

A saída é:

Como podemos ver, temos uma caixa de seleção sendo exibida na tela. Vamos adicionar a propriedade "verificada" para que a caixa de seleção já esteja marcada quando a página carregar. Para adicionar a propriedade "verificada", use a linha a seguir em seu código:

Esta é uma caixa de seleção

Podemos confirmar isso indo para as ferramentas de desenvolvedor do navegador e depois na guia Propriedades, onde podemos ver a propriedade “verificado”E seu valor como:

Podemos alterar a propriedade verificada clicando na própria caixa de seleção, como:

Mas e se quisermos usar o JavaScript para manipular a propriedade Checked.

Como alterar a propriedade verificada usando JavaScript

Para usar o JavaScript para alterar elementos no HTML, vamos criar um gatilho. Um gatilho pode ser qualquer coisa, pode ser um evento, ou localização de mouse, ou um botão. Vamos exigir dois botões. Um dos quais mudará o “verificado”O valor da propriedade para verdadeiro, e o outro para alterá -lo para“ falso ”

Vamos primeiro criar os dois botões usando as seguintes linhas.

Verificar
Desmarque

Essas linhas criariam os dois botões na tela como:

Hora de vincular esses botões com as funções que definimos dentro do “ONCLICK" propriedade.

Para criar essas duas funções, use os seguintes comandos dentro da tag de script .

Execute o arquivo novamente e clique nesses botões para examinar o comportamento da caixa de seleção.

Você terá esse comportamento.

Como você pode ver, agora estamos mudando o verificado Valor da propriedade da caixa de seleção usando JavaScript.

Conclusão

JavaScript pode ser usado para manipular o valor do “verificadoPropriedade de um Caixa de seleção dentro de marcação. Os elementos HTML são frequentemente manipulados usando JavaScript, e essas manipulações geralmente são feitas como resultado de alguma ação, talvez depois que o usuário pressione um botão ou clique em algum lugar na tela. Passamos brevemente sobre o que são caixas de seleção, como criá -las, qual é a propriedade "verificada" e como manipular essa propriedade quando o usuário pressiona um botão usando JavaScript.