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?


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>


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

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
}

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 .


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".


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


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")

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


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.


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();
});

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.


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.


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();
}

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ê.



46

Este código irá ajudá-lo

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

42

Isso funciona para mim:

/* isAgeSelected being id for checkbox */

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

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>


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.


33

Minha maneira de fazer isso é:

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}

31
$(selector).attr('checked') !== undefined

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


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();
        }
    });
});

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.


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"

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);
    }
});
});

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.


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();

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 .


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');
    };
});

19

Eu acho que vai ser o mais simples

$('#isAgeSelected').change(function() {
    if($(this).is(":checked")) {
        $('#txtAge').show();
    }
else{
        $('#txtAge').hide();
    }                                          
});
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.