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

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

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 116 aulas
• 4 projetos
• 9h 23min

Conhecer formação

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!