Como verifico se uma caixa de seleção está marcada no jQuery?

4550

Preciso verificar a checkedpropriedade de uma caixa de seleção e executar uma ação com base na propriedade marcada usando o jQuery.

Por exemplo, se a caixa de seleção de idade estiver marcada, preciso mostrar uma caixa de texto para inserir a idade; caso contrário, oculte a caixa de texto.

Mas o código a seguir retorna falsepor padrão:

if ($('#isAgeSelected').attr('checked'))
{
    $("#txtAge").show();
}
else
{
    $("#txtAge").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" id="isAgeSelected"/>

<div id="txtAge" style="display:none">
Age is selected
</div>

Como faço para consultar com sucesso a checkedpropriedade?

Prasad
fonte
14
$ ('# isAgeSelected') retorna a coleção, substitua-a por: $ ('# isAgeSelected') [0] .checked
zamoldar
14
por que não$('#isAgeSelected').checked
Don Cheadle
1
Para uma resposta mais abrangente (e correta) veja: stackoverflow.com/questions/426258/...
Paul Kenjora
12
Desde return array jQuery seletores, você pode usar$('#isAgeSelected')[0].checked
Felipe Leão
2
para mim, o seguinte ajuste funcionou: substitua .attr ('marcado') por .is (': marcado')
Mark N Hopgood

Respostas:

3433

Como faço para consultar com êxito a propriedade marcada?

A checkedpropriedade de um elemento DOM da caixa de seleção fornecerá o checkedestado do elemento.

Dado o código existente, você pode fazer o seguinte:

if(document.getElementById('isAgeSelected').checked) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

No entanto, há uma maneira muito mais bonita de fazer isso, usando toggle:

$('#isAgeSelected').click(function() {
    $("#txtAge").toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>

karim79
fonte
36
Eu tentei a condição acima também, mas ele retorna false única
Prasad
24
$ ("# txtAge"). alternar (this.checked); Faz exatamente o mesmo que $ ("# txtAge"). Toggle (). Portanto, se por algum motivo o estado estiver marcado e a próxima div estiver oculta (você clicou no botão voltar do navegador) - não funcionará conforme o esperado.
Maksim Vi.
23
@Chiramisu - Se você tivesse lido a resposta até o fim, teria notado que minha edição não usa o is(':checked')negócio.
karim79
8
para definir: $ ("# chkmyElement") [0] .checked = true; get: if ($ ("# chkmyElement") [0] .checked)
JJ_Coder4Hire
28
Esta não é uma resposta para a pergunta. this.checkednão é jQuery, conforme solicitado pelo OP. Além disso, ele só funciona quando o usuário clica na caixa de seleção, que não faz parte da pergunta. A questão é, novamente, How to check whether a checkbox is checked in jQuery?a qualquer momento, com ou sem clicar na caixa de seleção e no jQuery.
Marc Compte
1847

Use a função is () do jQuery :

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked
Bhanu Krishnan
fonte
19
Se você não precisa de duração, facilitando etc., você pode usar $("#txtAge").toggle($("#isAgeSelected").is(':checked'))
Naor
13
+1, existem diferentes maneiras de obter propriedades verificadas. Alguns estão listados aqui
user3199690 30/10
@NickG Na verdade jQuery faz ter um : selector visível
hvdd
2
@hvdd eu sei - eu disse "propriedade", não seletor.
NickG
@ NickG ... Eu não entendo o que você quer dizer. O jQuery não possui .visible"propriedade" ( propriedade ? você quer dizer método ?) porque o elemento no HTML possui uma propriedade visível . Eles têm uma display propriedade de estilo e é um pouco mais complexo do que ligar / desligar.
XDaizu 28/01
567

Usando jQuery> 1.6

<input type="checkbox" value="1" name="checkMeOut" id="checkMeOut" checked="checked" />

// traditional attr
$('#checkMeOut').attr('checked'); // "checked"
// new property method
$('#checkMeOut').prop('checked'); // true

Usando o novo método de propriedade:

if($('#checkMeOut').prop('checked')) {
    // something when checked
} else {
    // something else when not
}
SeanDowney
fonte
27
Gostaria de saber por que essa não é a resposta ... se você está usando jquery, o .propmétodo é a maneira projetada de verificar adereços. .. ... Se você for fazer a .is(":checked")abordagem, tudo bem, mas não é a maneira projetada de fazer isso usando jquery. direita?
Dsdsdsdsd
1
@dsdsdsdsd provavelmente porque precisa de mais uma etapa de compatibilidade com versões anteriores (estou enfrentando o mesmo problema no momento).
user98085
18
.is(":checked")e .prop("checked")são formas válidas para obter o mesmo resultado em jQuery, .isirá trabalhar em todas as versões, .proprequer 1.6+
gnarf
Se você usa o .attr('checked')jQuery 1.11.3, fica indefinido e, se usar .prop('checked'), será verdadeiro / falso. Não vejo por que eles mudaram para funcionar dessa maneira, quando navegadores mais antigos não podem suportar as versões posteriores do jQuery que foram introduzidas .prop()e, portanto, precisam .attr(). A única graça salvadora é que os navegadores mais antigos (ie IE 8) não podem suportar nada> jQuery 1.9. Espero que eles não tenham feito isso (make .attr('checked')= undefined) nessa versão! Felizmente, sempre há this.checked.
vapcguy
230

jQuery 1.6+

$('#isAgeSelected').prop('checked')

jQuery 1.5 e abaixo

$('#isAgeSelected').attr('checked')

Qualquer versão do jQuery

// Assuming an event handler on a checkbox
if (this.checked)

Todo o crédito é para Xian .

ungalcrys
fonte
8
Tecnicamente, this.checkedestá usando Javascript direto. Mas eu amo essa resposta entre versões do jQuery!
vapcguy
170

Estou usando isso e isso está funcionando absolutamente bem:

$("#checkkBoxId").attr("checked") ? alert("Checked") : alert("Unchecked");

Nota: Se a caixa de seleção estiver marcada, ela retornará true, caso contrário indefinido, portanto, verifique melhor o valor "TRUE".

Pradeep
fonte
6
Isso funciona porque $ ("# checkkBoxId"). Attr ("marcado") retorna "marcado" ou "" (sequência vazia). E uma cadeia vazia é Falsas corda, não vazio é truthy, consulte sobre truthy / valores Falsas docs.nodejitsu.com/articles/javascript-conventions/...
Adrien Seja
7
Por jquery 2.1.x, ele retorna sempre verificado se estiver marcado por padrão ... Não sei se esse comportamento é intencional, mas certamente não funciona (acho que é um bug) ... O val () também não funciona, permanece "ligado". O prop () está funcionando corretamente e o dom.checked também funciona.
Inf3rno 23/07/2014
1
E o problema surge quando você precisa oferecer suporte a navegadores mais antigos .attr()! Se ao menos eles deixassem o suficiente sozinhos ... Encontrei outra resposta aqui que você pode usar apenas this.checkedpara uma solução entre jQuery, já que é basicamente Javascript.
vapcguy
.attr ('marcado') testará se está marcado por padrão, sim. Porque está verificando o atributo html , não o estado atual. A versão anterior era um bug (embora tenha sido muito explorado, eu acho).
Jay Irvine
149

Usar:

<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

$("#planned_checked").change(function() {
    if($(this).prop('checked')) {
        alert("Checked Box Selected");
    } else {
        alert("Checked Box deselect");
    }
});

    $("#planned_checked").change(function() {
        if($(this).prop('checked')) {
            alert("Checked Box Selected");
        } else {
            alert("Checked Box deselect");
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

Lalji Dhameliya
fonte
119

Desde o jQuery 1.6, o comportamento de jQuery.attr()mudou e os usuários são incentivados a não usá-lo para recuperar o estado verificado de um elemento. Em vez disso, você deve usar jQuery.prop():

$("#txtAge").toggle(
    $("#isAgeSelected").prop("checked") // For checked attribute it returns true/false;
                                        // Return value changes with checkbox state
);

Duas outras possibilidades são:

$("#txtAge").get(0).checked
$("#txtAge").is(":checked")
Salman A
fonte
e $ ("# txtAge") [0] .checked
Yevgeniy Afanasyev
101

Isso funcionou para mim:

$get("isAgeSelected ").checked == true

Onde isAgeSelected está o ID do controle.

Além disso, a resposta de @ karim79 funciona bem. Não tenho certeza do que perdi no momento em que o testei.

Observe que esta resposta usa o Microsoft Ajax, não o jQuery

Prasad
fonte
4
Em todos os casos, em todas as linguagens de programação normais, você pode omitir== true
RedPixel
@RedPixel A menos que você esteja lidando com tipos anuláveis. :) (smiley pedante)
Kolob Canyon
88

Se você estiver usando uma versão atualizada do jquery, deve procurar o .propmétodo para resolver seu problema:

$('#isAgeSelected').prop('checked')retornará truese marcado e falsedesmarcado. Confirmei e me deparei com esse problema anteriormente. $('#isAgeSelected').attr('checked')e $('#isAgeSelected').is('checked')está retornando, o undefinedque não é uma resposta digna para a situação. Faça o que é indicado abaixo.

if($('#isAgeSelected').prop('checked')) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

Espero que ajude:) - Obrigado.

Rajesh Omanakuttan
fonte
por que não $('#isAgeSelected').checked?
Don Cheadle
1
para uso .é você precisa de um cólon $ ( '# isAgeSelected') é ( ': verificada').
Patrick
62

O uso do Clickmanipulador de eventos para a propriedade checkbox não é confiável, pois a checkedpropriedade pode mudar durante a execução do próprio manipulador de eventos!

Idealmente, você deseja colocar seu código em um changemanipulador de eventos, como ele é acionado toda vez que o valor da caixa de seleção é alterado (independentemente de como isso é feito).

$('#isAgeSelected').bind('change', function () {

   if ($(this).is(':checked'))
     $("#txtAge").show();
   else
     $("#txtAge").hide();
});
arviman
fonte
3
A partir do jQuery 1.7, o .on()método é o método preferido para anexar manipuladores de eventos a um documento.
naor 11/09/13
61

Usar:

<input type="checkbox" id="abc" value="UDB">UDB
<input type="checkbox" id="abc" value="Prasad">Prasad
$('input#abc').click(function(){
  if($(this).is(':checked'))
  {
    var checkedOne=$(this).val()
    alert(checkedOne);

    // Do some other action
  }
})

Isso pode ajudar se você desejar que a ação necessária seja executada apenas quando você marcar a caixa e não no momento em que a remover.

UDB
fonte
53

Decidi postar uma resposta sobre como fazer exatamente a mesma coisa sem o jQuery. Só porque sou rebelde.

var ageCheckbox = document.getElementById('isAgeSelected');
var ageInput = document.getElementById('txtAge');

// Just because of IE <333
ageCheckbox.onchange = function() {
    // Check if the checkbox is checked, and show/hide the text field.
    ageInput.hidden = this.checked ? false : true;
};

Primeiro, você obtém os dois elementos pelo ID. Em seguida, você atribui ao onchangeevento da caixa de seleção uma função que verifica se a caixa de seleção foi marcada e define ohidden propriedade do campo de texto de idade adequadamente. Nesse exemplo, usando o operador ternário.

Aqui está um violino para você testá-lo.

Termo aditivo

Se a compatibilidade entre navegadores for um problema, proponho definir a displaypropriedade CSS como none e inline .

elem.style.display = this.checked ? 'inline' : 'none';

Mais lento, mas compatível com vários navegadores.

Otaviano A. Damiean
fonte
Bem, .hiddennão é muito cross-browser, embora eu como esta solução :)
Florian Margaine
É realmente a melhor maneira de usar style. Isso é lamentável, pois o .hiddendesempenho é muito melhor .
Florian Margaine 21/03
Atribuição dentro de um operador condicional? Legal, sim. Não é o que eu chamaria de bom estilo, no entanto.
Jules
pode simplificar para: ageInput.hidden =! this.checked; (Eu odeio quando as pessoas usam literais booleanos desnecessariamente ... se você estiver usando tanto o "verdadeiro" e "falso" na mesma declaração simples, é provavelmente desnecessário o uso de qualquer um)
JoelFan
52

Eu acredito que você poderia fazer isso:

if ($('#isAgeSelected :checked').size() > 0)
{
    $("#txtAge").show(); 
} else { 
    $("#txtAge").hide();
}
xenon
fonte
alert ($ ('input [name = isAgeSelected]'). attr ('marcado')); O código acima mostra verdadeiro / falso com base na verificação. Qualquer problema com as tentativas anteriores
Prasad
Prasad, você está referenciando sua caixa de seleção por nome ou ID? Estou ficando confuso agora ...
karim79
Você não pode dar um ID? As coisas seriam muito mais fáceis. No seu exemplo, você o identifica por sua ID
xenon
O método .size () está obsoleto a partir do jQuery 1.8. Use a propriedade .length (with no () ;-)! E talvez você precise ficar junto "#isAgeSelected: selected".
François Breton
47

Corri exatamente para o mesmo problema. Eu tenho uma caixa de seleção do ASP.NET

<asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" />

No código do jQuery, usei o seguinte seletor para verificar se a caixa de seleção estava marcada ou não, e parece funcionar como um encanto.

if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

Tenho certeza de que você também pode usar o ID em vez do CssClass,

if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

Espero que isso ajude você.

Nertim
fonte
46

Existem várias maneiras de verificar se uma caixa de seleção está marcada ou não:

Maneira de verificar usando jQuery

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

Veja exemplo ou também documento:

Parth Chavda
fonte
46

Este código irá ajudá-lo

$('#isAgeSelected').click(function(){
   console.log(this.checked);
   if(this.checked == true) {
        $("#txtAge").show();
    } else {
       $("#txtAge").hide();
   }
});
sandeep kumar
fonte
42

Isso funciona para mim:

/* isAgeSelected being id for checkbox */

$("#isAgeSelected").click(function(){
  $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});
amadurecido
fonte
41

Este é um método diferente para fazer a mesma coisa:

$(document).ready(function (){

    $('#isAgeSelected').click(function() {
        // $("#txtAge").toggle(this.checked);

        // Using a pure CSS selector
        if ($(this.checked)) {
            alert('on check 1');
        };

        // Using jQuery's is() method
        if ($(this).is(':checked')) {
            alert('on checked 2');
        };

        //  // Using jQuery's filter() method
        if ($(this).filter(':checked')) {
            alert('on checked 3');
        };
    });
});
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>

Sangeet Shah
fonte
35

Usa isto:

if ($('input[name="salary_in.Basic"]:checked').length > 0)

O comprimento é maior que zero se a caixa de seleção estiver marcada.

Hamid NK
fonte
33

Minha maneira de fazer isso é:

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}
Dalius I
fonte
31
$(selector).attr('checked') !== undefined

Isso retorna truese a entrada estiver marcada e falsese não estiver.

fe_lix_
fonte
4
Entendo por que isso pode funcionar em certos cenários, embora tenha o mesmo problema, .attr('checked')pois nem sempre ele retorna o estado correto. De acordo com a resposta de Salman A (e talvez outras), é uma opção mais segura de usar . Além disso, também é possível declarar como . .prop('checked')undefinedvar undefined = 'checked';
WynandB
.prop('checked')parece uma resposta melhor agora. Não era tão confiável no momento em que foi escrito. Eu não entendo, nem acho que seja uma boa idéia redefinir indefinidamente.
fe_lix_
Como uma nota lateral, verificando indefinido é melhor comtypeof (x) !== "undefined"
Naor
Nesse caso, acredito que é mais preciso e fácil de ler com! ==. Eu usaria o typeof (x) apenas ao testar uma variável que pode ou não ter sido definida no passado.
fe_lix_
30
$(document).ready(function() {    
    $('#agecheckbox').click(function() {
        if($(this).is(":checked"))
        {
            $('#agetextbox').show();
        } else {
            $('#agetextbox').hide();
        }
    });
});
Jumper Pot
fonte
30

Você pode usar:

  if(document.getElementById('isAgeSelected').checked)
    $("#txtAge").show();  
  else
    $("#txtAge").hide();

if($("#isAgeSelected").is(':checked'))
  $("#txtAge").show();  
else
  $("#txtAge").hide();

Ambos devem funcionar.

Muhammad Awais
fonte
27

1) Se a sua marcação HTML for:

<input type="checkbox"  />

attr usado:

$(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set

Se prop é usado:

$(element).prop("checked"); // Will give you false whether or not initial value is set

2) Se a sua marcação HTML for:

 <input type="checkbox"  checked="checked" />// May be like this also  checked="true"

attr usado:

$(element).attr("checked") // Will return checked whether it is checked="true"

Suporte usado:

$(element).prop("checked") // Will return true whether checked="checked"
Somnath Kharat
fonte
Esse é um problema real. Minha solução alternativa - adicione um evento de alteração à entrada: <input type = "checkbox" onchange = "ChangeChkBox ()" /> use esse evento para alterar uma variável JavaScript booleana e use a variável JavaScript em vez de consultar a caixa de seleção diretamente.
Graham Laight
24

Este exemplo é para o botão.

Tente o seguinte:

<input type="button" class="check" id="checkall" value="Check All" />  &nbsp; <input type="button" id="remove" value="Delete" /> <br/>

<input type="checkbox" class="cb-element"  value="1" /> Checkbox  1 <br/>
<input type="checkbox" class="cb-element"  value="2" /> Checkbox  2 <br/>
<input type="checkbox" class="cb-element"  value="3" /> Checkbox  3 <br/>


$('#remove').attr('disabled', 'disabled'); 

$(document).ready(function() {  

    $('.cb-element').click(function() {

        if($(this).prop('checked'))
        {
            $('#remove').attr('disabled', false);
        }
        else
        {
            $('#remove').attr('disabled', true);
        }
    });   

    $('.check:button').click(function()
{
    var checked = !$(this).data('checked');
    $('input:checkbox').prop('checked', checked);
    $(this).data('checked', checked);

    if(checked == true)
    {
        $(this).val('Uncheck All');
         $('#remove').attr('disabled', false);
    }

    else if(checked == false)
    {
        $(this).val('Check All');
        $('#remove').attr('disabled', true);
    }
});
});
usayee
fonte
24

A resposta principal não fez isso por mim. Isso aconteceu no entanto:

<script type="text/javascript">
    $(document).ready(function(){

        $("#li_13").click(function(){
            if($("#agree").attr('checked')){
                $("#saveForm").fadeIn();
            }
            else
            {
                $("#saveForm").fadeOut();
            }
        });
    });
</script>

Basicamente, quando o elemento # li_13 é clicado, ele verifica se o elemento # concorda (que é a caixa de seleção) está marcado usando a .attr('checked')função Se for, fadeIn no elemento #saveForm e, se não for, fadeOut o elemento saveForm.

BigHomie
fonte
22

Eu estou usando isso:

 <input type="checkbox" id="isAgeSelected" value="1" /> <br/>
 <input type="textbox" id="txtAge" />

 $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
Nishant
fonte
22

Apesar de ter proposto uma solução JavaScript para o seu problema (exibindo uma textboxquando um checkboxé checked), este problema poderia ser resolvido apenas por css . Com essa abordagem, seu formulário funciona para usuários que desativaram o JavaScript.

Supondo que você tenha o seguinte HTML:

<label for="show_textbox">Show Textbox</label>
<input id="show_textbox" type="checkbox" />
<input type="text" />

Você pode usar o seguinte CSS para obter a funcionalidade desejada:

 #show_textbox:not(:checked) + input[type=text] {display:none;}

Para outros cenários, você pode pensar nos seletores de CSS apropriados.

Aqui está um violino para demonstrar essa abordagem .

Ormoz
fonte
21

Alternar: 0/1 ou então

<input type="checkbox" id="nolunch" />
<input id="checklunch />"

    $('#nolunch').change(function () {
    if ($(this).is(':checked')) {
        $('#checklunch').val('1');
    };
    if ($(this).is(':checked') == false) {
        $('#checklunch').val('0');
    };
});
user2385302
fonte
19

Eu acho que vai ser o mais simples

$('#isAgeSelected').change(function() {
    if($(this).is(":checked")) {
        $('#txtAge').show();
    }
else{
        $('#txtAge').hide();
    }                                          
});
Jitendra Damor
fonte