Obter valor da caixa de seleção no jQuery


Respostas:


1062

Para obter o valor do atributo Value, você pode fazer algo assim:

$("input[type='checkbox']").val();

Ou, se você definiu um classou idpara ele, pode:

$('#check_id').val();
$('.check_class').val();

No entanto, isso retornará o mesmo valor, verificado ou não, isso pode ser confuso, pois é diferente do comportamento do formulário enviado.

Para verificar se está marcado ou não, faça:

if ($('#check_id').is(":checked"))
{
  // it is checked
}

3
O que o primeiro exemplo faz se houver várias caixas de seleção na página? Aliás, pode ser escrito de uma maneira mais curta $("input:checkbox"). Além disso, parece haver um erro de digitação no seletor de classe ...
Jawa

1
@Jawa: O primeiro foi apenas um exemplo para mostrar a sintaxe e obrigado por esse erro de digitação.
Sarfraz 14/05

136
Se eu tentar $($0).val()no Chrome e desmarcar a caixa de seleção, a resposta será "ativada", mesmo que não esteja marcada. Mas $($0).is(":checked")retorna o valor certo.
Adrian

2
@Jawa Per api.jquery.com/checkbox-selector [type="checkbox"] tem melhor desempenho em navegadores modernos do que :checkbox.
TrueWill 22/06

3
Substitua $('#check_id').val();para $('#check_id').is(":checked");retornar o valor verdadeiro ou falso.
Matheus Miranda

228

Essas duas maneiras estão funcionando:

  • $('#checkbox').prop('checked')
  • $('#checkbox').is(':checked')(obrigado @mgsloan)

$('#test').click(function() {
    alert("Checkbox state (method 1) = " + $('#test').prop('checked'));
    alert("Checkbox state (method 2) = " + $('#test').is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Check me: <input id="test" type="checkbox" />


9
.is ( 'checada') não funcionou porque deve ser .is ( ': verificada')
mgsloan

Obrigado pela sua resposta. Esta é uma resposta de última geração com a função jQuery prop ()
Thomas.Benz

58

Experimente esta pequena solução:

$("#some_id").attr("checked") ? 1 : 0;

ou

$("#some_id").attr("checked") || 0;

Ou !! ($ ("# some_id"). Attr ("marcado"))
COOLGAMETUBE

34

As únicas maneiras corretas de recuperar o valor de uma caixa de seleção são as seguintes

if ( elem.checked ) 
if ( $( elem ).prop( "checked" ) ) 
if ( $( elem ).is( ":checked" ) ) 

conforme explicado nas documentações oficiais no site do jQuery. O restante dos métodos não tem nada a ver com a propriedade da caixa de seleção, eles estão verificando o atributo, o que significa que estão testando o estado inicial da caixa de seleção quando ela foi carregada. Então, resumindo:

  • Quando você tem o elemento e sabe que é uma caixa de seleção, pode simplesmente ler sua propriedade e não precisará do jQuery para isso (ou seja elem.checked) ou poderá usá- $(elem).prop("checked")lo se quiser confiar no jQuery.
  • Se você precisar conhecer (ou comparar) o valor quando o elemento foi carregado pela primeira vez (ou seja, o valor padrão), é a maneira correta de fazê-lo $(elem).is(":checked").

As respostas são enganosas, verifique abaixo você mesmo:

http://api.jquery.com/prop/


.is(":checked")e .prop(":checked")estão trabalhando o mesmo para mim w / jQuery 1.10.0
Josh

23

Apenas para esclarecer as coisas:

$('#checkbox_ID').is(":checked")

Retornará 'verdadeiro' ou 'falso'


14
$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();

não funciona. você pode precisar de uma coluna antes verificado ': verificada'
usefulBee

9
.val () não funciona. Retorna 'on' independentemente de marcado.
Michael Cole

11
jQuery(".checkboxClass").click(function(){
        var selectedCountry = new Array();
        var n = jQuery(".checkboxClass:checked").length;
        if (n > 0){
            jQuery(".checkboxClass:checked").each(function(){
                selectedCountry.push($(this).val());
            });
        }
        alert(selectedCountry);
    });

10

Simples, mas eficaz e pressupõe que você saiba que a caixa de seleção será encontrada:

$("#some_id")[0].checked;

true/false


9
//By each()
var testval = [];
 $('.hobbies_class:checked').each(function() {
   testval.push($(this).val());
 });


//by map()
var testval = $('input:checkbox:checked.hobbies_class').map(function(){
return this.value; }).get().join(",");

 //HTML Code

 <input type="checkbox" value="cricket" name="hobbies[]"  class="hobbies_class">Cricket 
  <input type="checkbox" value="hockey" name="hobbies[]" class="hobbies_class">Hockey


Demonstração de exemplo


5

Apesar de esta pergunta estar pedindo uma solução jQuery, aqui está uma resposta JavaScript pura, já que ninguém a mencionou.

Sem jQuery:

Basta selecionar o elemento e acessar a checkedpropriedade (que retorna um booleano).

var checkbox = document.querySelector('input[type="checkbox"]');

alert(checkbox.checked);
<input type="checkbox"/>


Aqui está um exemplo rápido ao ouvir o changeevento:

var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function (e) {
    alert(this.checked);
});
<input type="checkbox"/>


Para selecionar elementos marcados, use a :checkedpseudo classe ( input[type="checkbox"]:checked).

Aqui está um exemplo que itera sobre os inputelementos verificados e retorna uma matriz mapeada dos nomes dos elementos verificados.

Exemplo Aqui

var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
    return el.name;
});

console.log(checkedElements);


1
Isso não responde à pergunta.
Michael Cole

@ MichaelCole - Acabei de reler a pergunta (três anos depois) e parece que isso realmente responde à pergunta, então fique à vontade para elaborar.
Josh Crozier

1
"Como posso obter o valor de uma caixa de seleção no jQuery?" -> "Apesar do fato de esta pergunta estar pedindo uma solução jQuery ... blá blá blá". É uma resposta de caixa de sabão, no caminho de outras respostas reais, e foi por isso que eu a votei com menos.
Michael Cole

1
@ MichaelCole - É justo, o feedback é sempre apreciado. A intenção original desta resposta era indicar que o jQuery pode ser evitado em casos triviais como este, quando a checkedpropriedade é facilmente acessível no elemento DOM nativo. Algumas pessoas que pesquisam perguntas / respostas como essas geralmente desconhecem o fato de que o jQuery às vezes não é necessário. Em outras palavras, as pessoas de mente estreita não são o alvo demográfico para esta resposta.
21718 Josh Crozier #:

2

Aqui está como obter o valor de todas as caixas de seleção marcadas como uma matriz:

var values = (function() {
                var a = [];
                $(".checkboxes:checked").each(function() {
                    a.push(this.value);
                });
                return a;
            })()

2

para obter o valor do checkboxex marcado em jquery:

var checks = $("input[type='checkbox']:checked"); // returns object of checkeds.

for(var i=0; i<checks.length; i++){
    console.log($(checks[i]).val()); // or do what you want
});

em pure js:

var checks = document.querySelectorAll("input[type='checkbox']:checked");

for(var i=0; i<checks.length; i++){
    console.log(checks[i].value); // or do what you want
});


0
$('.class[value=3]').prop('checked', true);

1
A questão é perguntar como obter o valor, não como verificar algo com um valor padrão específico.
Quentin

0

A melhor maneira é $('input[name="line"]:checked').val()

E também você pode obter o texto selecionado $('input[name="line"]:checked').text()

Inclua atributo e nome de valor nas entradas do botão de opção. Certifique-se de que todas as entradas tenham o mesmo atributo de nome.

<div class="col-8 m-radio-inline">
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="1" checked> Value Text 1
    </label>
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="2"> Value Text 2
    </label>
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="3"> Value Text 3
    </label>
</div>

-1
<script type="text/javascript">
$(document).ready(function(){
    $('.laravel').click(function(){
        var val = $(this).is(":checked");
        $('#category').submit();
    });
});

<form action="{{route('directory')}}" method="post" id="category">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input name="category" value="{{$name->id}}"  class="laravel" type="checkbox">{{$name->name}}
                      </form>

-1

Apenas atenção, a partir de hoje, 2018, devido à mudança de APIs ao longo dos anos. removeAttr está obsoleto, NÃO está mais funcionando!

Jquery Marque ou desmarque uma caixa de seleção:

Ruim, não funciona mais.

   $('#add_user_certificate_checkbox').removeAttr("checked");

   $('#add_user_certificate_checkbox').attr("checked","checked");

Em vez disso, você deve fazer:

      $('#add_user_certificate_checkbox').prop('checked', true);
      $('#add_user_certificate_checkbox').prop('checked', false);
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.