¿Cómo comprobar si jQuery está marcado?

Necesito verificar la propiedad de la bandera checked y realizar una acción basada en la propiedad verificada utilizando jQuery.

Por ejemplo, si la casilla de verificación de la edad está marcada, entonces necesito mostrar un cuadro de texto para ingresar la edad; de lo contrario, oculte el cuadro de texto.

Pero el siguiente código devuelve false por defecto:

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

¿Cómo recuperar con éxito la propiedad checked ?

3928
23 мая '09 в 18:16 2009-05-23 18:16 Prasad se administra el 23 de mayo de 2009 a las 18:16 2009-05-23 18:16
@ 58 respuestas
  • 1
  • 2

Funcionó para mí:

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

Donde isAgeSelected es el ID de control.

Además, la respuesta @ karim79 funciona bien. No estoy seguro de lo que me perdí cuando lo probé.

Nota Esta respuesta utiliza Microsoft Ajax, no jQuery.

83
24 мая '09 в 8:30 2009-05-24 08:30 La respuesta se da a Prasad el 24 de mayo de 2009 a las 8:30, 2009-05-24, 8:30

¿Cómo puedo ejecutar una solicitud de una propiedad verificada?

La propiedad checked del elemento de casilla de verificación DOM le dará el estado checked del elemento.

Dado su código existente, puede hacer esto:

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

Sin embargo, hay una manera más hermosa de hacer esto usando el 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 la respuesta la da karim79 el 23 de mayo de 2009 a las 18:20 2009-05-23 18:20

Usa la función jQuery is () :

 if($("#isAgeSelected").is(':checked')) $("#txtAge").show(); // checked else $("#txtAge").hide(); // unchecked 
1553
22 июня '11 в 13:14 2011-06-22 13:14 La respuesta se le da a Bhanu Krishnan el 22 de junio de 2011 a las 1:14 pm

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 el nuevo método de propiedad:

 if($('#checkMeOut').prop('checked')) { // something when checked } else { // something else when not } 
474
23 июня '11 в 20:29 2011-06-23 20:29 La respuesta la da SeanDowney el 23 de junio de 2011 a las 20:29 2011-06-23 20:29

jQuery 1.6 +

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

jQuery 1.5 y por debajo

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

Cualquier versión de jQuery

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

Todos los préstamos son xian .

179
20 мая '14 в 23:03 2014-05-20 23:03 la respuesta se da ungalcrys 20 de mayo de 2014 a las 23:03 2014-05-20 23:03

Lo uso y funciona absolutamente bien:

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

Nota Si está marcado, devolverá verdadero; de lo contrario, de lo contrario no estará definido, por lo que es mejor verificar el valor VERDADERO

149
19 авг. La respuesta se da Pradeep 19 ago. 2010-08-19 16:38 '10 a las 16:38 2010-08-19 16:38

Uso:

 <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 авг. La respuesta se da Lalji Dhameliya 29 de agosto. 2016-08-29 14:38 '16 a las 14:38 2016-08-29 14:38

Desde jQuery 1.6, el comportamiento de jQuery.attr() ha cambiado, y se recomienda a los usuarios que no lo utilicen para recuperar el estado marcado por un elemento. En su lugar, debes usar jQuery.prop() :

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

Otras dos características:

 $("#txtAge").get(0).checked $("#txtAge").is(":checked") 
106
27 апр. La respuesta la da Salman el 27 de abril. 2012-04-27 14:54 '12 a las 2:54 pm 2012-04-27 14:54

Si está utilizando una versión actualizada de jquery, debe buscar el método .prop para resolver su problema:

$('#isAgeSelected').prop('checked') devuelve true si está marcado, y false si no está configurado. Confirmé esto y me encontré con este problema antes. $('#isAgeSelected').attr('checked') y $('#isAgeSelected').is('checked') devuelve undefined , lo que no es una buena respuesta a la situación. Haz lo que se muestra a continuación.

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

Espero que esto ayude :) - Gracias.

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

¡Usar el controlador de eventos Click para la propiedad checkbox no es confiable, ya que la propiedad seleccionada puede cambiar durante la ejecución del controlador de eventos en sí!

Lo ideal es que coloque su código en un controlador de eventos de change , por ejemplo, se ejecuta cada vez que cambia el valor del indicador (sin importar cómo se haga).

 $('#isAgeSelected').bind('change', function () { if ($(this).is(':checked')) $("#txtAge").show(); else $("#txtAge").hide(); }); 
55
06 окт. la respuesta se da arviman 06 oct. 2011-10-06 04:12 '11 a las 4:12 del 2011-10-06 04:12

Decidí publicar una respuesta sobre cómo hacer lo mismo sin jQuery. Solo porque soy un 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; }; 

Primero obtienes los dos elementos por su id. Luego, asigna un evento de cambio de casilla onchange verificación a una función que verifica si la casilla de verificación está marcada y configura la propiedad hidden del campo de texto de edad en consecuencia. Este ejemplo utiliza el operador ternario.

Aquí tienes un violín para comprobarlo.

Añadir

Si la compatibilidad entre navegadores es un problema, sugiero configurar la propiedad de display CSS en ninguno y en línea.

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

Más lento pero compatible con varios navegadores.

50
20 марта '12 в 22:19 2012-03-20 22:19 Octavian Damiean da la respuesta el 20 de marzo de 2012 a las 10:19 2012-03-20 22:19

Creo que podrías hacer esto:

 if ($('#isAgeSelected :checked').size() > 0) { $("#txtAge").show(); } else { $("#txtAge").hide(); } 
40
23 мая '09 в 18:34 2009-05-23 18:34 la respuesta se da xenon el 23 de mayo de 2009 a las 18:34 2009-05-23 18:34

Hay muchas formas de verificar si la casilla está marcada:

Método de validación de JQuery

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

Compruebe un ejemplo o documento:

38
14 окт. Respuesta dada a Parth Chavda el 14 de octubre. 2014-10-14 10:48 14 a las 10:48 2014-10-14 10:48

Me encontré con el mismo problema. He comprobado ASP.NET

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

En el código jQuery, utilicé el siguiente selector para verificar si la bandera estaba configurada o no, y parece que funciona como un hechizo.

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

Estoy seguro de que también puede utilizar la ID en lugar de la clase Css,

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

Espero que esto te ayude.

37
16 дек. La respuesta se da Nertim 16 dic. 2010-12-16 21:50 '10 a las 21:50 2010-12-16 21:50

Funciona para mi

  $("#isAgeSelected").click(function(){ $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide(); }); 
35
06 янв. la respuesta se da ashish amatya 06 jan. 2011-01-06 14:33 '11 a las 14:33 2011-01-06 14:33

Esta es otra forma de hacer lo mismo:

 <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 авг. La respuesta se da Sangeet Shah 24 de agosto. 2015-08-24 15:19 '15 a las 15:19 2015-08-24 15:19

Mi manera de hacer esto es:

 if ( $("#checkbox:checked").length ) { alert("checkbox is checked"); } else { alert("checkbox is not checked"); } 
30
06 февр. La respuesta se da Dalius I 06 Feb. 2012-02-06 17:31 '12 a las 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 нояб. Respuesta dada por Jumper Pot 25 Nov. 2014-11-25 15:25 '14 a las 15:25 2014-11-25 15:25

Puedes usar este código:

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

Devuelve true si la entrada es verificada y false si no lo es.

30
12 февр. la respuesta se da fe_lix_ 12 feb. 2012-02-12 18:15 '12 a las 6:15 pm 2012-02-12 18:15

Usa esto:

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

Si está marcado, la longitud es mayor que cero.

29
27 июля '16 в 12:46 2016-07-27 12:46 Hamid NK da la respuesta el 27 de julio de 2016 a las 12:46 2016-07-27 12:46

Puedes usar:

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

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

Ambos deberían funcionar.

28
28 апр. La respuesta es dada por Muhammad Awais el 28 de abril. 2016-04-28 15:07 '16 a las 15:07 2016-04-28 15:07

Este ejemplo es para el botón.

Intenta lo siguiente:

 <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 янв. la respuesta es dada por usayee 03 de enero 2014-01-03 13:38 '14 a las 13:38 2014-01-03 13:38

La respuesta principal no lo hizo por mí. Esto sucedió sin embargo:

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

Básicamente, cuando se hace clic en el elemento # li_13, se comprueba si el elemento # (que es la casilla de verificación) está de acuerdo con la función .attr('checked') . Si esto es así, entonces el elemento fadeIn #saveForm, y si no es el elemento fadeOut saveForm.

23
10 дек. La respuesta se da MDMoore313 10 de diciembre. 2012-12-10 08:02 '12 a las 8:02 2012-12-10 08:02

1) Si su marca HTML:

 <input type="checkbox" /> 

attr

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

Si se utiliza apoyo:

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

2) Si su marca 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" 

Apoyo utilizado:

 $(element).prop("checked") // Will return true whether checked="checked" 
23
30 окт. La respuesta la da Somnath Kharat el 30 de octubre. 2013-10-30 15:43 '13 a las 15:43 2013-10-30 15:43

Interruptor: 0/1 o más

 <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 янв. respuesta dada por user2385302 08 de enero 2015-01-08 16:10 '15 a las 16:10 2015-01-08 16:10

Yo uso esto:

  <input type="checkbox" id="isAgeSelected" value="1" /> <br/> <input type="textbox" id="txtAge" /> $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide(); 
19
06 сент. La respuesta es dada por Nishant Kumar 06 de septiembre 2013-09-06 09:43 '13 a las 9:43 2013-09-06 09:43

Aunque ha propuesto una solución de JavaScript para su problema (el textbox muestra cuando la checkbox está checked ), este problema solo puede resolverse con la ayuda de css . Con este enfoque, su formulario funciona para usuarios que han deshabilitado JavaScript.

Suponiendo que tiene el siguiente HTML:

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

Puedes usar el siguiente CSS para lograr la funcionalidad deseada:

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

En otros escenarios, podría pensar en los selectores de CSS apropiados.

Aquí hay un guión que demuestra este enfoque .

19
22 авг. Ormoz da la respuesta el 22 de agosto. 2015-08-22 22:09 '15 a las 10:09 pm 2015-08-22 22:09
 if($("#checkkBoxId").is(':checked')){ alert("Checked=true"); } 

o

 if($("#checkkBoxId").attr('checked') == true){ alert("checked=true"); } 
16
10 июня '13 в 16:12 2013-06-10 16:12 la respuesta la da ijarlax el 10 de junio de 2013 a las 16:12 2013-06-10 16:12

Estoy seguro de que esto no es un tipo de revelación, pero no vi todo esto en un ejemplo:

Selector para todas las casillas marcadas (en la página):

 $('input[type=checkbox]:checked') 
15
15 нояб. La respuesta se da Tsonev 15 nov. 2013-11-15 13:50 '13 a las 13:50 2013-11-15 13:50
  • 1
  • 2

Otras preguntas sobre las etiquetas o hacer una pregunta