JavaScript

Como ativar ou desativar checkbox com JavaScript

21 de outubro de 2021

Como ativar ou desativar checkbox com JavaScript

Neste artigo você vai aprender a como ativar ou desativar checkbox com JavaScript puro, de uma maneira muito simples

ativar ou desativar checkbox capa

Fala programador(a), beleza? Bora aprender mais sobre manipulação de DOM com JavaScript!

Primeiramente vamos precisar pegar o elemento no DOM, ou seja, resgatar ele por meio de um método seletor

Vamos utilizar aqui o getElementById, e encapsular o checkbox em uma variável

Depois basta mudar o valor da propriedade checked

Ela aceita true, checkbox marcada, e false, checkbox desmarcada

Veja um exemplo prático:

const checkbox = document.getElementById("meu_checkbox")

checkbox.checked = true // marcou

checkbox.checked = false // desmarcou

Note que agora você precisa atribuir as suas lógicas para que tudo funcione como você espera

Mas isto é suficiente para marcar ou desmarcar uma checkbox do HTML com JavaScript puro!

Outra possibilidade menos utilizada é ativar o método click na checkbox, aí seria como se o usuário clicasse no elemento do formulário

Fazendo a sua ativação ou desativação, também da mesma forma que a nossa, de alteração do atributo checked

Conclusão

Neste artigo você aprendeu a como ativar ou desativar checkbox em JavaScript

Precisamos selecionar o elemento alvo, você pode utilizar vários métodos: getElementById, getElementByClassName, querySelector e outros

Depois de selecionarmos, precisamos alterar a propriedade checked do elemento para true ou false

Sendo true a checkbox ativada e false ela desativada

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x