{"id":691,"date":"2024-10-12T19:21:57","date_gmt":"2024-10-12T22:21:57","guid":{"rendered":"https:\/\/urutaudev.com.br\/?p=691"},"modified":"2024-10-12T19:51:03","modified_gmt":"2024-10-12T22:51:03","slug":"como-validar-checkbox-com-javascript","status":"publish","type":"post","link":"https:\/\/urutaudev.com.br\/index.php\/2024\/10\/12\/como-validar-checkbox-com-javascript\/","title":{"rendered":"Como validar checkbox com Javascript"},"content":{"rendered":"

<\/h1>\n
\"Como
Como validar checkbox<\/figcaption><\/figure>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Como Validar um Checkbox com JavaScript<\/a>:<\/span><\/h2>\n
\n
Validar checkboxes em formul\u00e1rios \u00e9 uma tarefa comum no desenvolvimento web, especialmente quando h\u00e1 a necessidade de garantir que o usu\u00e1rio selecionou uma ou mais op\u00e7\u00f5es antes de enviar um formul\u00e1rio. Neste post, vou mostrar como validar um checkbox de forma eficiente utilizando JavaScript.<\/span><\/div>\n<\/div>\n

 <\/p>\n

O que \u00e9 um Checkbox?<\/strong><\/span><\/h4>\n

Um checkbox \u00e9 um elemento de formul\u00e1rio que permite ao usu\u00e1rio selecionar uma ou mais op\u00e7\u00f5es entre as v\u00e1rias disponibilizadas em uma pagina. Ele geralmente utilizado para definir aceite de termos e condi\u00e7\u00f5es, selecionar prefer\u00eancias em lista, entre outros cen\u00e1rios que possa existir em uma p\u00e1gina html.<\/span><\/p>\n

 <\/p>\n

Aqui est\u00e1 um exemplo de como montar a base do HTML que vamos utilizar:<\/span><\/strong><\/p>\n

 <\/p>\n

\n
<!DOCTYPE html><\/code><\/div>\n
<html lang=\"en\"><\/code><\/div>\n
<head><\/code><\/div>\n
\u00a0 \u00a0 <meta charset=\"UTF-8\"><\/code><\/div>\n
\u00a0 \u00a0 <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/code><\/div>\n
\u00a0 \u00a0 <title>Valida\u00e7\u00e3o de Checkbox<\/title><\/code><\/div>\n
<\/head><\/code><\/div>\n
<body><\/code><\/div>\n
\u00a0 \u00a0 <div class=\"container\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <label><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input \u00a0type=\"checkbox\"<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 id=\"checkbox\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Aceito os termos e condi\u00e7\u00f5es<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/label><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <buttontype=\"button\"<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 onclick=\"validarCheckbox();\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Validar<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/button><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <p id=\"info\"><\/p><\/code><\/div>\n
\u00a0 \u00a0 <\/div><\/code><\/div>\n
<\/body><\/code><\/div>\n
<\/html><\/code><\/div>\n<\/div>\n

 <\/p>\n

Depois adiciono o css respons\u00e1vel pela estiliza\u00e7\u00e3o da p\u00e1gina :<\/span><\/strong><\/span><\/p>\n

 <\/p>\n

\n
\u00a0 \u00a0 <style><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 body {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 width: 100vw;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 height: 100vh;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: flex;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 flex-direction: row;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 align-items: center;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 justify-content: center;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 .container {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: flex;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 flex-direction: column;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 align-items: center;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 justify-content: center;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 gap: 1rem;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font-size: 2rem;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font-weight: 900;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 label {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: flex;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 flex-direction: row;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 align-items: center;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 justify-content: center;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 gap: 0.5rem;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 #checkbox {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 width: 1.5rem;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 height: 1.5rem;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 #info {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: flex;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 color: black;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 button {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 padding: 0.8rem;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 border: none;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 background-color: #3e83c5 !important;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 color: white;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font-size: 1.2rem;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font-weight: 900;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 letter-spacing: 0.125rem;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 <\/style><\/code><\/div>\n<\/div>\n

 <\/p>\n

Por ultimo adiciono o script respons\u00e1vel por adicionar a l\u00f3gica de valida\u00e7\u00e3o:<\/span><\/strong><\/span><\/p>\n

 <\/p>\n

\n
\u00a0<script><\/code><\/span><\/div>\n
\u00a0 \u00a0 const checkbox = document.getElementById('checkbox');<\/code><\/span><\/div>\n
\u00a0 \u00a0 const info = document.getElementById('info');<\/code><\/span><\/div>\n
\u00a0 \u00a0 function validarCheckbox() {<\/code><\/span><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 info.textContent = checkbox.checked<\/code><\/span><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ? 'O checkbox est\u00e1 marcado.'<\/code><\/span><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 : 'O checkbox n\u00e3o est\u00e1 marcado.';<\/code><\/span><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 info.style.color = checkbox.checked ? 'green' : 'red';<\/code><\/span><\/div>\n
\u00a0 \u00a0 }<\/code><\/span><\/div>\n
<\/script><\/code><\/span><\/div>\n<\/div>\n

 <\/p>\n

Aqui est\u00e1 uma breve explica\u00e7\u00e3o do c\u00f3digo acima:<\/span><\/strong><\/p>\n

 <\/p>\n

    \n
  1. Declara\u00e7\u00e3o de constantes<\/strong>: Nas primeiras 2 linhas declaro as variaveis contantes que far\u00e3o a refer\u00eancia aos elementos do checkbox e da mensagem de informa\u00e7\u00e3o (info).<\/span><\/li>\n
  2. Fun\u00e7\u00e3o usada para valida\u00e7\u00e3o (validarCheckbox)\u00a0<\/strong><\/span>\n
      \n
    • Verifica o estado do checkbox (marcado ou n\u00e3o).<\/span><\/li>\n
    • Atualiza o texto no elemento info<\/code> , exibido a inform\u00e7\u00e3o se o checkbox est\u00e1 ou n\u00e3o marcado, dependendo do estado do checkbox.<\/span><\/li>\n
    • Muda a cor da mensagem para verde ou vermelho, dependendo do estado do checkbox.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n

       <\/p>\n

       <\/p>\n

      Deixo aqui um v\u00eddeo curto mostrando o processo:<\/span><\/strong><\/span><\/p>\n

       <\/p>\n