Como verificar se o jQuery está marcado?

Eu preciso verificar a propriedade de sinalização checked e executar uma ação com base na propriedade verificada usando jQuery.

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

Mas o código a seguir retorna false por padrão:

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

Como recuperar com sucesso a propriedade checked ?

3928
23 мая '09 в 18:16 2009-05-23 18:16 Prasad é dado em 23 de maio de 2009 às 18:16 2009-05-23 18:16
@ 58 respostas
  • 1
  • 2

Funcionou para mim:

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

Onde isAgeSelected é o ID de controle.

Além disso, a resposta @ karim79 funciona bem. Não tenho certeza do que senti falta quando testei.

Nota Essa resposta usa o Microsoft Ajax, não o jQuery.

83
24 мая '09 в 8:30 2009-05-24 08:30 a resposta é dada Prasad Prasad 24 de maio de 2009 às 08:30 2009-05-24 08:30

Como posso executar uma solicitação para uma propriedade verificada?

A propriedade checked do elemento checkbox DOM lhe dará o estado checked do item.

Dado seu código existente, você pode fazer isso:

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

No entanto, existe uma maneira mais bonita de fazer isso usando a toggle :

 <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> 
3106
23 мая '09 в 18:20 2009-05-23 18:20 a resposta é dada por Karim79 em 23 de maio de 2009 às 18:20 2009-05-23 18:20

Use a função jQuery is () :

 if($("#isAgeSelected").is(':checked')) $("#txtAge").show(); // checked else $("#txtAge").hide(); // unchecked 
1553
22 июня '11 в 13:14 2011-06-22 13:14 a resposta é dada a Bhanu Krishnan em 22 de junho '11 at 1:14 pm 2011-06-22 13:14

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 } 
474
23 июня '11 в 20:29 2011-06-23 20:29 a resposta é dada por SeanDowney em 23 de junho '11 às 20:29 2011-06-23 20:29

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) 

Todos os empréstimos são Xian .

179
20 мая '14 в 23:03 2014-05-20 23:03 a resposta é dada ungalcrys May 20 '14 at 23:03 2014-05-20 23:03

Eu uso e funciona absolutamente bem:

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

Nota Se marcado, ele retornará verdadeiro, caso contrário, não é definido, por isso é melhor verificar o valor VERDADEIRO.

149
19 авг. A resposta é dada Pradeep 19 ago. 2010-08-19 16:38 '10 às 16:38 2010-08-19 16:38

Use:

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

 <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 
117
29 авг. a resposta é dada Lalji Dhameliya 29 ago. 2016-08-29 14:38 '16 às 14:38 2016-08-29 14:38

Desde o jQuery 1.6, o comportamento de jQuery.attr() mudou, e os usuários são aconselhados a não usá-lo para recuperar o estado marcado por 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 ); 

Dois outros recursos:

 $("#txtAge").get(0).checked $("#txtAge").is(":checked") 
106
27 апр. a resposta é dada por Salman A 27 abr. 2012-04-27 14:54 '12 às 2:54 pm 2012-04-27 14:54

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

$('#isAgeSelected').prop('checked') retorna true se marcado, e false se não for setado. Eu confirmei isso e me deparei com essa questão anteriormente. $('#isAgeSelected').attr('checked') e $('#isAgeSelected').is('checked') retorna undefined , o que não é uma boa resposta para a situação. Faça como mostrado abaixo.

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

Espero que isso ajude :) - Obrigado.

80
25 авг. Resposta dada por Rajesh Omanakuttan 25 ago. 2013-08-25 06:11 '13 at 6:11 am 2013-08-25 06:11

O uso do manipulador de eventos Click para a propriedade da caixa de seleção não é confiável, pois a propriedade checked pode mudar durante a execução do próprio manipulador de eventos!

Idealmente, você deseja colocar seu código em um manipulador de eventos de change , por exemplo, ele é executado toda vez que o valor do sinalizador é alterado (não importa como isso é feito).

 $('#isAgeSelected').bind('change', function () { if ($(this).is(':checked')) $("#txtAge").show(); else $("#txtAge").hide(); }); 
55
06 окт. a resposta é dada arviman 06 oct. 2011-10-06 04:12 '11 às 4:12 em 2011-10-06 04:12

Eu decidi postar uma resposta sobre como fazer o mesmo sem jQuery. Só porque sou um 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ê pega os dois itens pelo seu id. Em seguida, você atribui um onchange checkboxe onchange a uma função que verifica se a caixa de seleção está marcada e define a propriedade hidden do campo de texto de idade de acordo. Este exemplo usa o operador ternário.

Aqui você tem um violino para conferir.

Adicionar

Se a compatibilidade entre navegadores for um problema, sugiro configurar a propriedade de display CSS como none e inline.

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

Mais lento, mas compatível com navegadores.

50
20 марта '12 в 22:19 2012-03-20 22:19 a resposta é dada por Octavian Damiean em 20 de março de 2012 às 10:19 2012-03-20 22:19

Eu acho que você poderia fazer isso:

 if ($('#isAgeSelected :checked').size() > 0) { $("#txtAge").show(); } else { $("#txtAge").hide(); } 
40
23 мая '09 в 18:34 2009-05-23 18:34 a resposta é dada xenon 23 de maio, '09 at 18:34 2009-05-23 18:34

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

Método de validação JQuery

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

Verifique um exemplo ou documento:

38
14 окт. resposta dada ao Parth Chavda 14 de outubro. 2014-10-14 10:48 '14 às 10:48 2014-10-14 10:48

Eu me deparei com o mesmo problema. Eu verifiquei o ASP.NET

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

No código jQuery, usei o seletor a seguir para verificar se o sinalizador estava definido ou não, e parece que funciona como um encanto.

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

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

37
16 дек. A resposta é dada Nertim 16 de dezembro 2010-12-16 21:50 '10 às 21:50 2010-12-16 21:50

Isso funciona para mim:

  $("#isAgeSelected").click(function(){ $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide(); }); 
35
06 янв. a resposta é dada ashish amatya 06 jan. 2011-01-06 14:33 '11 às 14:33 2011-01-06 14:33

Esta é outra maneira de fazer o mesmo:

 <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> 
33
24 авг. a resposta é dada Sangeet Shah 24 ago. 2015-08-24 15:19 '15 às 15:19 2015-08-24 15:19

Minha maneira de fazer isso é:

 if ( $("#checkbox:checked").length ) { alert("checkbox is checked"); } else { alert("checkbox is not checked"); } 
30
06 февр. A resposta é dada Dalius I 06 fev. 2012-02-06 17:31 '12 em 5:31 pm 2012-02-06 17:31
 $(document).ready(function() { $('#agecheckbox').click(function() { if($(this).is(":checked")) { $('#agetextbox').show(); } else { $('#agetextbox').hide(); } }); }); 
30
25 нояб. Resposta dada por Jumper Pot 25 Nov. 2014-11-25 15:25 '14 às 15:25 2014-11-25 15:25

Você pode usar este código:

 $('#isAgeSelected').click(function(){ console.log(this.checked); if(this.checked == true) { $("#txtAge").show(); } else { $("#txtAge").hide(); } }); 
30
13 окт. Resposta dada por sandeep kumar 13 de out 2016-10-13 09:03 '16 às 9:03 am 2016-10-13 09:03
 $(selector).attr('checked') !== undefined 

Retorna true se a entrada for verificada e false se não for.

30
12 февр. a resposta é dada fe_lix_ 12 de fevereiro 2012-02-12 18:15 '12 às 6:15 pm 2012-02-12 18:15

Use isto:

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

Se marcado, o comprimento é maior que zero.

29
27 июля '16 в 12:46 2016-07-27 12:46 a resposta é dada por Hamid NK em 27 de julho '16 às 12:46 2016-07-27 12:46

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.

28
28 апр. A resposta é dada por Muhammad Awais Apr 28 2016-04-28 15:07 '16 às 15:07 2016-04-28 15:07

Este exemplo é para o botão.

Tente o seguinte:

 <input type="button" class="check" id="checkall" value="Check All" />  <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
03 янв. a resposta é dada por usayee Jan 03 2014-01-03 13:38 '14 às 13:38 2014-01-03 13:38

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

 <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 # (que é a caixa de seleção) concorda com a função .attr('checked') . Se este for o elemento fadeIn #saveForm, e se não for o elemento fadeOut saveForm.

23
10 дек. A resposta é dada MDMoore313 10 dez. 2012-12-10 08:02 '12 às 8:02 2012-12-10 08:02

1) Se sua marcação HTML:

 <input type="checkbox" /> 

attr:

 $(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 sua marcação HTML:

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

attr:

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

Prop usado:

 $(element).prop("checked") // Will return true whether checked="checked" 
23
30 окт. a resposta é dada por Somnath Kharat 30 de outubro . 2013-10-30 15:43 '13 às 15:43 2013-10-30 15:43

Switch: 0/1 ou mais

 <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'); }; }); 
21
08 янв. Resposta dada por user2385302 Jan 08 2015-01-08 16:10 '15 às 16:10 2015-01-08 16:10

Eu uso isso:

  <input type="checkbox" id="isAgeSelected" value="1" /> <br/> <input type="textbox" id="txtAge" /> $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide(); 
19
06 сент. A resposta é dada por Nishant Kumar 06 de setembro 2013-09-06 09:43 '13 às 9:43 2013-09-06 09:43

Embora você tenha proposto uma solução JavaScript para o seu problema (a textbox mostrada quando a checkbox está checked ), esse problema pode ser resolvido com a ajuda do 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;} 

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

Aqui está um script demonstrando essa abordagem .

19
22 авг. A resposta é dada por Ormoz em 22 de agosto. 2015-08-22 22:09 '15 às 10:09 pm 2015-08-22 22:09
 if($("#checkkBoxId").is(':checked')){ alert("Checked=true"); } 

ou

 if($("#checkkBoxId").attr('checked') == true){ alert("checked=true"); } 
16
10 июня '13 в 16:12 2013-06-10 16:12 a resposta é dada por ijarlax Junho 10 '13 em 16:12 2013-06-10 16:12

Tenho certeza de que isso não é algum tipo de revelação, mas eu não vi tudo isso em um exemplo:

Seletor para todas as caixas marcadas (na página):

 $('input[type=checkbox]:checked') 
15
15 нояб. A resposta é dada Tsonev 15 nov. 2013-11-15 13:50 '13 às 13:50 2013-11-15 13:50
  • 1
  • 2

Outras questões sobre tags ou Faça uma pergunta