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