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 - 27
Tutorial para Obter o Valor de um Checkox

Nesse tutorial veremos como obter o valor de um checkbox.
O valor � um atributo da tag do elemento que n�o � exibido na tela, mas pode ser usado para algumas funcionalidades de back-end. Portanto, precisamos saber como obter esses valores do elemento.
Vamos considerar o caso de valores de caixa de sele��o, por exemplo. Basicamente, o m�todo mais importante aqui � .val(), que ajuda a retornar o valor de qualquer elemento selecionado. Mas como precisamos conhecer as caixas de sele��o marcadas, abaixo est�o as maneiras de fazer isso.
Obtendo o valor da caixa de sele��o usando o seletor :checked
Este � um seletor jQuery que nos ajuda a saber se a caixa de sele��o est� marcada ou n�o. Ele retorna o valor como uma express�o booleana � true, false. Agora, para marcar a caixa de sele��o, precisamos especificar o tipo de entrada, ou seja, input[type= 'checkbox']. Isso agora retornar� todas as tags de entrada que possuem caixas de sele��o como seu tipo. Agora, quando o seletor :checked � usado para isso, ele retornar� verdadeiro apenas para caixas de sele��o marcadas. Mas como precisamos obter o valor das caixas de sele��o marcadas, usaremos o m�todo .val() para obter o valor.
Sintaxe:
$("input[type='checkbox']:checked").val();
Vejamos um exemplo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <title>Como obter o valor de um Checkbox usando jQuery</title> <script type="text/javascript"> $(document).ready(function () { $('button').click(function () { var name = $("input[type='checkbox']:checked").val(); $('h3').html("O valor do checkbox selecionado �: " + name); }) }); </script> <script src='/google_analytics_auto.js'></script></head> <body> <h2>Como obter o valor de um Checkbox usando jQuery</h2> <p>Entre as seguintes caixas de sele��o, obtenha o valor da caixa de sele��o selecionada.</p> <button>Pegue o Valor</button> <hr> <input type="checkbox" class="myCheckboxes" value="Masculino" id="checkbox1"/>Masculino<br/> <input type="checkbox" class="myCheckboxes" value="Feminino" id="checkbox2"/>Feminino<br/> <hr/> <br/> <h3></h3> </body> </html>
Resultado:
Veja na imagem o resultado desse c�digo:

<< Tutorial para Gerar um Simples Popup
Tutorial para Obter o Valor de um Checkox >>

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