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