Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JQuery - 18
Tutorial para Validar Checkboxes

Nesse tutorial vamos mostrar como validar checkboxes usando jQuery. Para isso, estamos utilizando dois métodos:
método .prop
método .is
Ambos os métodos são usados para validar uma caixa de seleção em jQuery.
Primeiro de tudo, vamos aprender alguns fundamentos do jQuery e elementos de caixa de seleção. Além disso, podemos explicar esse conceito com vários exemplos usando ambos os métodos.
Mas, o que é uma caixa de seleção?
Uma caixa de seleção é usada para exibir pequenos quadrados que oferecem ao usuário várias opções que podem ser ativadas e desativadas. Um visto é exibido se as opções forem selecionadas; caso contrário, a caixa quadrada permanecerá vazia. Pode haver várias caixas de seleção em um formulário e cada uma funciona independentemente das outras. É usada quando um visitante recebe uma pergunta que pode ter mais de uma resposta certa.
Uma tag <input> com o tipo de atributo definido como "caixa de seleção" é usado para criar uma caixa de seleção.
Sintaxe:
<input type ="checkbox" name ="checkbox name" value ="choice-id" checked>
Os atributos que podem ser especificados para uma caixa de seleção são:
1) Name: este atributo é usado para especificar um nome para a caixa de seleção.
2) Value: Este atributo é usado para fornecer um valor para cada caixa de seleção. Este valor será enviado se a caixa de seleção estiver marcada.
3) Checked: este atributo é usado para selecionar o valor padrão da caixa de seleção.
Exemplo:
<input type ="checkbox" value = "cantar">
<input type ="checkbox" value = "dançar">
<input type ="checkbox" value = "ler" checked>
Neste exemplo, podemos criar várias opções do hobby em um formulário. O visitante pode ter uma ou mais opções para escolher um hobby, como cantar, dançar e ler. Por padrão, a opção de leitura está marcada porque definimos esse atributo como marcado.
Vejamos alguns exemplos:
Exemplo 1:
Nesse exemplo vamos criar um formulário com uma caixa de seleção para que o usuário possa marcar e concordar com os termos e condições do site. Se a caixa de seleção não for marcada e o usuário tentar se registrar uma mensagem surgirá informando que ele deve marcar a caixa, senão não poderá se registrar:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Validação de Checkbox usando o método prop(). </title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"> </script> <script> $(document).ready (function () { my_function_terms=function my_function_terms(status,str){ if (status=='NOTOK'){ $('#terms1').css ( { "border-color": "red", "border-width":"1px", "border-style":"solid" } ); } else { $('#terms1').css ( { 'border-color': '',"border-width":"0px" } ); } $('#msg_terms').html (str); } /////// ///////// Termos & Condições ////////// $("#terms").change (function () { var ckb_status = $("#terms").prop('checked'); if(ckb_status) { my_function_terms ("OK","Origado por Registrar..........."); } else { my_function_terms("NOTOK","Você deve concordar com os termos e condições antes de enviar o formulário."); } } ); $("#b1").click (function (event) { var ckb_status = $("#terms").prop('checked'); if (ckb_status) { my_function_terms("OK","Origado .. "); } else { my_function_terms("NOTOK", "Por favor, concorde com os termos e condições antes de submeter o formulário."); } }) }) </script> <style> h1 { color: blue; } h5 { color: blue; } h2 { color: blue; } p { color: red; } b { color: blue; font-size: 38px; } body{ background-color: yellow; </style> <script src='/google_analytics_auto.js'></script></head> <body> <table class='table' align="center" > <caption > <h2>Formulário de Registro</h2> </caption> <tr> <td > <label>Nome: </label> <input type="textbox" value="" name='name1'> <br> <br> </td> </tr> <tr> <td > <label>Email: </label> <input type="email" value="" name='name2'> <br> <br> </td> </tr> <tr> <td > <label>Senha: </label> <input type="password" value="" name='name3'> <br> <br> </td> </tr> <tr> <td > <span class='form-group' id=terms1> <input type=checkbox value=yes name='terms1' id='terms'> Eu Concordo com os <a href='#' >Termos & Condições</a> </span> </td> <td> <div id=msg_terms name=msg_terms> </div> </td> </tr> <tr> <td colspan=2> <input type=button id=b1 class=b1 value='Register'> </td> </tr> </table> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

Exemplo 2:
Esse exemplo vamos apenas utilizar um checkox e um botão para saber se a caixa foi marcada ou não. A resposta será exibida em uma janela de diálogo 'alert'.
<! DOCTYPE html> <html> <head> <title> Validação do Checkbox Termos & Condições </title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"> </script> <script type="text/javascript"> $(function () { $('#btncheck').click (function () { if ($('#chkterms').is(':checked')) { alert ('Você concordou com os Termos e Condições.') } else { alert ('Por favor, marque o checkbox.') } }) }) </script> <style> b { color: blue; font-size: 38px; } body { background-color: cyan; } div { margin-top: 30px; } </style> <script src='/google_analytics_auto.js'></script></head> <body> <form id="form1" > <div align="center"> Estado do Checkbox: <input type="checkbox" id="chkterms" /> <br> <br> Termos & Conditições <input type="button" id="btncheck" value="Verificar" /> </div> </form> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

<< Tutorial para Aplicar Efeitos en Textos
Tutorial para Criar Máscaras para Números de Telefone >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino