61 Pregunta: ¿Cómo verificar si una casilla está marcada en jQuery?

pregunta creada en Wed, Jun 26, 2019 12:00 AM

Necesito marcar la propiedad checked de una casilla de verificación y realizar una acción basada en la propiedad marcada usando 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, ocultar el cuadro de texto.

Pero el siguiente código devuelve false de manera predeterminada:

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>

¿Cómo puedo consultar correctamente la propiedad checked?

    
4249
  1. Verifique otras maneras de hacer esto usando jQuery aquí stackoverflow.com/a /22019103/1868660
    2014-02-25 15: 45: 46Z
  2. $('#isAgeSelected').change(function(){ alert($('#chkSelect').attr('checked')); });
    2014-05-14 05: 43: 47Z
  3. $('# isAgeSelected') devuelve la colección, reemplazarla por: $('# isAgeSelected') [0] .checked
    2015-05-19 16: 53: 21Z
  4. por qué no $('#isAgeSelected').checked
    2015-10-27 14: 52: 34Z
  5. Como los selectores jQuery devuelven la matriz, puede usar $('#isAgeSelected')[0].checked
    2016-06-20 19: 36: 34Z
30 Respuestas                              30                         
  

¿Cómo puedo consultar con éxito la propiedad marcada?

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

Dado su código existente, por lo tanto, podría hacer esto:

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

Sin embargo, hay una manera mucho más bonita de hacerlo, utilizando 0600350991111101035062 :

toggle
    
3278
2018-03-09 02: 06: 27Z
  1. también probé la condición anterior, pero solo devuelve falso
    2009-05-23 15: 24: 20Z
  2. $("# txtAge"). toggle (this.checked); Hace exactamente lo mismo que $("# txtAge"). Toggle (). Por lo tanto, si por alguna razón se comprueba el estado y se oculta el siguiente div (hizo clic en el botón de retroceso en su navegador), no funcionará como se esperaba.
    2010-10-04 20: 55: 23Z
  3. @ Chiramisu - Si hubieras leído la respuesta hasta el final, habrías notado que mi edición no usa el negocio
    $('#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>
    .
    2012-03-06 10: 14: 19Z
  4. para establecer: $("# chkmyElement") [0] .checked = true; para obtener: if ($("# chkmyElement") [0] .checked)
    2014-04-22 02: 28: 35Z
  5. Esto no es una respuesta a la pregunta. is(':checked') no es jQuery, como solicitó el OP. Además, solo funciona cuando el usuario hace clic en la casilla de verificación, que no forma parte de la pregunta. La pregunta es, nuevamente, this.checked en cualquier momento con o sin hacer clic en la casilla de verificación y en jQuery.
    2017-07-06 10: 58: 14Z

Use la función jQuery es () :

How to check whether a checkbox is checked in jQuery?     
1704
2012-08-23 03: 42: 16Z
  1. Si no necesita duración, aceleración, etc., puede usar
    if($("#isAgeSelected").is(':checked'))
        $("#txtAge").show();  // checked
    else
        $("#txtAge").hide();  // unchecked
    
    2013-09-11 07: 21: 09Z
  2. + 1 hay diferentes formas de verificar la propiedad. Algunos están listados aquí
    2014-10-30 07: 07: 56Z
  3. @ NickG En realidad, jQuery tiene tiene un : selector visible
    2015-07-17 21: 37: 54Z
  4. @ hvdd Lo sé, dije "propiedad", no selector.
    2015-07-20 08: 16: 57Z
  5. @ NickG ... No entiendo lo que quieres decir. jQuery no tiene $("#txtAge").toggle($("#isAgeSelected").is(':checked')) "propiedad" ( propiedad ? te refieres a método ?) porque el elemento no HTML tiene una propiedad visible . Tienen una propiedad de estilo .visible y es un poco más complejo que el encendido /apagado.
    2016-01-28 11: 43: 23Z

Usando jQuery > 1.6

display

Usando el nuevo método de propiedad:

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

// traditional attr
$('#checkMeOut').attr('checked'); // "checked"
// new property method
$('#checkMeOut').prop('checked'); // true
    
518
2011-06-23 17: 29: 18Z
  1. Me gustaría saber por qué esta no es la respuesta ... si está usando jquery, entonces el método 060035099111110101035062 es el diseñado Manera de comprobar los accesorios. .. ... Si va a hacer el enfoque
    if($('#checkMeOut').prop('checked')) {
        // something when checked
    } else {
        // something else when not
    }
    
    , está bien, pero no es la forma diseñada de hacerlo utilizando jquery. ¿verdad?
    2013-12-01 12: 28: 58Z
  2. @ dsdsdsdsd, presumiblemente porque necesita otro paso de compatibilidad hacia atrás (me estoy enfrentando al mismo problema en este momento).
    2014-01-28 11: 38: 14Z
  3. .prop y .is(":checked") son formas válidas para obtener el mismo resultado en jQuery, 060035099111010506506006006006
    2014-06-26 20: 50: 18Z
  4. Si usa .is(":checked") en jQuery 1.11.3, quedará indefinido, mientras que si usa .prop("checked"), obtendrá verdadero /falso. No veo por qué lo cambiaron para que funcione de esta manera cuando los navegadores más antiguos no pueden admitir las versiones posteriores de jQuery que introdujeron .is y, por lo tanto, necesitan 060035099111110101035062. La única salvación es que los navegadores más antiguos (es decir, IE 8) no pueden soportar nada y gt; jQuery 1.9. ¡Ojalá no hayan hecho esto (haga .prop = indefinido) en esa versión! Afortunadamente, siempre hay .attr('checked').
    2015-06-19 16: 53: 26Z

jQuery 1.6+

.prop('checked')

jQuery 1.5 y anteriores

.prop()

Cualquier versión de jQuery

.attr()

Todo el crédito va a Xian .

    
211
2017-05-23 12: 26: 29Z
  1. Técnicamente, .attr('checked') está usando Javascript directamente. ¡Pero me encanta esa respuesta de la versión cruzada de jQuery!
    2015-06-19 16: 50: 35Z

Estoy usando esto y está funcionando absolutamente bien:

this.checked

Nota: si la casilla de verificación está marcada, devolverá verdadero si no está definido, así que mejor compruebe el valor "VERDADERO".

    
157
2014-05-07 12: 18: 22Z
  1. Esto funciona porque $("# checkkBoxId"). attr ("checked") devuelve "check" o "" (cadena vacía). Y una cadena vacía es falsa, la cadena no vacía es veraz, consulte los valores de verdad /falsa docs.nodejitsu.com/articles/javascript-conventions/…
    2013-07-12 07: 09: 07Z
  2. Por jquery 2.1.x devuelve siempre verificada si está verificada de forma predeterminada ... No sé si este comportamiento es intencional, pero seguramente no funciona (Supongo que es un error) ... El val () tampoco funciona, permanece "activado". El prop () funciona correctamente y el dom.checked también funciona.
    2014-07-23 16: 19: 57Z
  3. ¡Y el problema surge cuando tienes que admitir navegadores más antiguos con
    $('#isAgeSelected').prop('checked')
    
    ! Si solo se hubieran dejado bastante bien solos ... Encontré otra respuesta aquí que puedes usar
    $('#isAgeSelected').attr('checked')
    
    para una solución de jQuery cruzada, ya que es básicamente Javascript.
    2015-06-19 16: 48: 48Z

Uso:

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

this.checked
    
139
2018-06-15 07: 16: 33Z

Desde jQuery 1.6, el comportamiento de

$("#checkkBoxId").attr("checked") ? alert("Checked") : alert("Unchecked");
ha cambiado y se recomienda a los usuarios que no lo utilicen para recuperar el estado verificado de un elemento. . En su lugar, debe utilizar .attr() :

this.checked

Otras dos posibilidades son:

<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");
    }
});
    
113
2016-10-30 17: 10: 20Z
  1. por alguna razón, prop ("checked") funcionó para mí, pero no es (': checked')
    2012-06-11 20: 19: 56Z
  2. y $("# txtAge") [0] .checked
    2018-05-16 03: 52: 29Z

Esto me funcionó:

    $("#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

Donde jQuery.attr() es el id del control.

También, answer de @ karim79 funciona bien. No estoy seguro de lo que me perdí en el momento en que lo probé.

Nota, esta es la respuesta utiliza Microsoft Ajax, no jQuery

    
92
2017-05-23 12: 34: 51Z
  1. En todos los casos, en todos los lenguajes de programación normales, puede omitir jQuery.prop()
    2019-04-14 20: 07: 51Z

Si está utilizando una versión actualizada de jquery, debe utilizar el método

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

$("#txtAge").get(0).checked
$("#txtAge").is(":checked")
devolverá
$get("isAgeSelected ").checked == true
si está marcado y 0600350991100101035062 si no está marcado. Lo confirmé y me encontré con este problema antes. isAgeSelected y == true está regresando .prop que no es una respuesta digna para la situación. Así que haz lo que se indica a continuación. $('#isAgeSelected').prop('checked')

Espero que ayude:) - Gracias.

    
84
2015-09-12 16: 10: 02Z
  1. ¿por qué no true?
    2015-10-27 14: 53: 21Z
  2. para usar .is necesitas un signo de dos puntos ('# isAgeSelected'). is (': checked')
    2016-02-18 12: 44: 36Z

¡El uso del controlador de eventos false para la propiedad de la casilla de verificación no es confiable, ya que la propiedad $('#isAgeSelected').attr('checked') puede cambiar durante la ejecución del controlador de eventos en sí!

Lo ideal sería colocar su código en un controlador de eventos $('#isAgeSelected').is('checked'), tal como se activa cada vez que se cambia el valor de la casilla de verificación (independientemente de cómo se hace). undefined     

58
2016-10-30 17: 09: 33Z
  1. A partir de jQuery 1.7, 060035099110010105050 método es el método preferido para adjuntar controladores de eventos a un documento.
    2013-09-11 07: 02: 39Z

Uso:

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

Esto puede ayudar si desea que la acción requerida se realice solo cuando marca la casilla y no en el momento en que retira la verificación.

    
54
2018-10-29 10: 25: 55Z

Decidí publicar una respuesta sobre cómo hacer exactamente lo mismo sin jQuery. Solo porque soy un rebelde.

Click

Primero obtienes ambos elementos por su ID. Luego, asigna al evento checked de la casilla de verificación una función que verifica si la casilla de verificación se marcó y establece la propiedad 060035099111110101035062 del campo de texto de edad de manera apropiada. En ese ejemplo utilizando el operador ternario.

Aquí hay un fIddle para que lo pruebes.

Addendum

Si la compatibilidad entre navegadores es un problema, propongo establecer la propiedad CSS change en none y inline .

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

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

Más lento pero compatible con varios navegadores.

    
51
2012-04-05 15: 50: 25Z
  1. Bueno, .on() no es un navegador cruzado, aunque me gusta esta solución :)
    2012-03-20 19: 59: 40Z
  2. De hecho, es la mejor manera de usar
    <input type="checkbox" id="abc" value="UDB">UDB
    <input type="checkbox" id="abc" value="Prasad">Prasad
    
    . Sin embargo, es una pena, ya que 0600350991111001010505050 el rendimiento es mucho mejor .
    2012-03-21 09: 37: 06Z
  3. ¿Asignación dentro de un operador condicional? Legal si Sin embargo, no es lo que llamaría un buen estilo.
    2012-04-05 12: 12: 26Z
  4. puede simplificar a: ageInput.hidden =! esto.checked; (Odio cuando la gente usa literales booleanos innecesariamente ... si está usando "verdadero" y "falso" en la misma declaración simple, probablemente no sea necesario usar ninguno de estos)
    2015-03-06 20: 38: 14Z

Creo que podrías hacer esto:

$('input#abc').click(function(){
  if($(this).is(':checked'))
  {
    var checkedOne=$(this).val()
    alert(checkedOne);

    // Do some other action
  }
})
    
46
2009-05-23 15: 34: 24Z
  1. alert ($('input [name = isAgeSelected]'). attr ('checked')); El código anterior muestra verdadero /falso basado en el cheque. Cualquier problema con los intentos anteriores
    2009-05-23 15: 41: 43Z
  2. Prasad, ¿hace referencia a su casilla de verificación por nombre o ID? Me estoy confundiendo ahora ...
    2009-05-23 15: 52: 26Z
  3. lo he referenciado por nombre
    2009-05-23 16: 08: 54Z
  4. ¿No puedes darle una identificación? Las cosas serían mucho más fáciles. En su ejemplo, lo ha abordado por su ID
    2009-05-23 16: 10: 24Z
  5. El método .size () está en desuso a partir de jQuery 1.8. Use la propiedad .length (sin la propiedad () ;-) en su lugar! Y tal vez tengas que mantenerte unido "#isAgeSelected: checked".
    2018-02-28 11: 17: 13Z

Hay muchas formas de verificar si una casilla está marcada o no:

Manera de verificar usando jQuery

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

Compruebe el ejemplo o también el documento:

43
2016-10-30 17: 30: 42Z

Me encontré con el mismo problema exacto. Tengo una casilla de verificación ASP.NET

onchange

En el código jQuery usé el siguiente selector para verificar si la casilla de verificación estaba marcada o no, y parece funcionarcomo un encanto.

hidden

Estoy seguro de que también puedes usar la ID en lugar de la clase Css,

display

Espero que esto te ayude.

    
42
2011-05-25 10: 59: 04Z

Este es un método diferente para hacer lo mismo:

elem.style.display = this.checked ? 'inline' : 'none';
    
41
2016-10-30 17: 34: 28Z

Esto funciona para mí:

.hidden     
39
2016-10-30 17: 08: 46Z

Usa esto:

style

La longitud es mayor que cero si la casilla está marcada.

    
35
2017-01-16 08: 51: 06Z

Puedes usar este código:

.hidden     
34
2016-10-30 17: 36: 57Z

Mi forma de hacer esto es:

if ($('#isAgeSelected :checked').size() > 0)
{
    $("#txtAge").show(); 
} else { 
    $("#txtAge").hide();
}
    
32
2015-04-06 20: 52: 33Z
if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
if ($(elem).attr('checked'))

Esto devuelve

<asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" />
si la entrada está marcada y
if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }
si no está.     
31
2013-03-21 11: 13: 00Z
  1. Entiendo por qué esto podría funcionar en ciertos escenarios, aunque tiene el mismo problema que
    if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked'))
    { ... } else { ... }
    
    porque no siempre devuelve el estado correcto. Según la respuesta (y quizás otras) de Salman A , es una opción más segura para hacer uso de
    $(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>
    en su lugar. Además, también es posible declarar
    /* isAgeSelected being id for checkbox */
    
    $("#isAgeSelected").click(function(){
      $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
    });
    
    como
    if ($('input[name="salary_in.Basic"]:checked').length > 0)
    
    .
    2013-04-05 00: 56: 27Z
  2. $('#isAgeSelected').click(function(){
       console.log(this.checked);
       if(this.checked == true) {
            $("#txtAge").show();
        } else {
           $("#txtAge").hide();
       }
    });
    
    parece una mejor respuesta ahora. No era tan confiable en el momento en que fue escrito. No entiendo, ni creo que sea una buena idea para volver a declarar indefinido.
    2013-04-25 10: 02: 28Z
  3. Como nota al margen, es mejor verificar que no esté definido con
    if ( $("#checkbox:checked").length ) {       
        alert("checkbox is checked");
    } else {
        alert("checkbox is not checked");
    }
    
    2013-09-11 07: 05: 10Z
  4. En ese caso, creo que es más preciso y más fácil de leer con! ==. Usaría el typeof (x) solo cuando se prueba una variable que puede o no haber sido definida en el pasado.
    2013-09-18 08: 04: 23Z
$(selector).attr('checked') !== undefined
30
2014-11-26 15: 07: 01Z

Puedes usar:

true
false

Ambos deberían funcionar.

    
30
2016-09-21 15: 21: 33Z

1) Si su marca HTML es:

.attr('checked')

attr used:

.prop('checked')

Si se usa apoyo:

undefined

2) Si su marca HTML es:

var undefined = 'checked';

attr used:

.prop('checked')

Prop. utilizada:

typeof (x) !== "undefined"     
26
2016-10-30 17: 25: 33Z
  1. Este es un problema REAL. Mi solución: agregue un evento de cambio a la entrada: < input type = "checkbox" onchange = "ChangeChkBox ()" /> luego use ese evento para cambiar una variable de JavaScript booleana, y use la variable de JavaScript en lugar de consultar directamente la casilla de verificación.
    2016-05-10 11: 33: 26Z

Este ejemplo es para el botón.

Prueba lo siguiente:

$(document).ready(function() {    
    $('#agecheckbox').click(function() {
        if($(this).is(":checked"))
        {
            $('#agetextbox').show();
        } else {
            $('#agetextbox').hide();
        }
    });
});
    
24
2016-06-02 14: 17: 27Z

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

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

Básicamente, cuando se hace clic en el elemento # li_13, se comprueba si el elemento # de acuerdo (que es la casilla de verificación) se marca mediante la función

if($("#isAgeSelected").is(':checked'))
  $("#txtAge").show();  
else
  $("#txtAge").hide();
. Si es entonces fadeIn el elemento #saveForm, y si no es fadeOut el elemento saveForm.     
24
2016-10-30 17: 12: 04Z

Estoy usando esto:

<input type="checkbox"  />
    
22
2016-10-30 17: 22: 27Z

Aunque ha propuesto una solución JavaScript para su problema (mostrando un

$(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set
cuando un
$(element).prop("checked"); // Will give you false whether or not initial value is set
es
 <input type="checkbox"  checked="checked" />// May be like this also  checked="true"
), este problema podría resolverse solo por css . Con este enfoque, su formulario funciona para usuarios que han desactivado JavaScript.

Suponiendo que tiene el siguiente HTML:

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

Puede usar el siguiente CSS para lograr la funcionalidad deseada:

$(element).prop("checked") // Will return true whether checked="checked"

Para otros escenarios, puede pensar en los selectores de CSS apropiados.

Aquí hay un Fiddle para demostrar este enfoque .

    
22
2016-10-30 17: 32: 58Z

Alternar: 0/1 o bien

<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);
    }
});
});
    
21
2015-05-05 08: 48: 08Z

Creo que será el más sencillo

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

        $("#li_13").click(function(){
            if($("#agree").attr('checked')){
                $("#saveForm").fadeIn();
            }
            else
            {
                $("#saveForm").fadeOut();
            }
        });
    });
</script>
    
18
2015-06-04 05: 07: 16Z
.attr('checked')
fuente colocada aquí