¿Cómo verifico si una casilla de verificación está marcada en jQuery?

Necesito comprobar el checked propiedad de una casilla de verificación y realizar una acción basada en la propiedad marcada usando jQuery.

Por ejemplo, si el age la casilla de verificación está marcada, luego necesito mostrar un cuadro de texto para ingresar age, 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();
}
<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 consulto con éxito el checked ¿propiedad?

preguntado el 23 de mayo de 09 a las 15:05

Compruebe algunas otras formas de hacer esto usando jQuery aquí stackoverflow.com/a/22019103/1868660 -

Por qué no $('#isAgeSelected').checked -

Para obtener una respuesta completa (y correcta), consulte: stackoverflow.com/questions/426258/… -

Dado que los selectores de jQuery devuelven una matriz, puede usar $('#isAgeSelected')[0].checked -

30 Respuestas

¿Cómo consulto correctamente la propiedad marcada?

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

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

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

Sin embargo, hay una forma mucho más bonita de hacer esto, 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>

respondido 09 mar '18, 05:03

Esta no es una respuesta a la pregunta. this.checked no es jQuery, como pidió 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, de nuevo, How to check whether a checkbox is checked in jQuery? en cualquier momento con o sin hacer clic en la casilla de verificación y en jQuery. - Marc Compte

Utilice jQuery's es() función:

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

Respondido 23 ago 12, 07:08

Una solución un poco más limpia sería $("#txtAge").toggle($("#isAgeSelected").is(':checked')). - Kai Neuwerth

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
}

Respondido el 23 de junio de 11 a las 21:06

jQuery 1.6+

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

jQuery 1.5 y menos

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

Cualquier versión de jQuery

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

Todo el crédito va a Xian.

contestado el 23 de mayo de 17 a las 15:05

Técnicamente, this.checked utiliza Javascript directo. ¡Pero me encanta esa respuesta de la versión cruzada de jQuery! - vapcguy

Estoy usando esto y funciona absolutamente bien:

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

Nota: Si la casilla de verificación está marcada, devolverá verdadero, de lo contrario, indefinido, por lo que es mejor verificar el valor "VERDADERO".

contestado el 07 de mayo de 14 a las 16:05

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

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

Respondido el 15 de junio de 18 a las 10:06

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 verificado de un elemento. En su lugar, deberías usar jQuery.prop():

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

Otras dos posibilidades son:

$("#txtAge").get(0).checked
$("#txtAge").is(":checked")

Respondido 30 Oct 16, 20:10

Esto funcionó para mí:

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

Dónde isAgeSelected es el id del control.

Además, @ karim79's https://www.youtube.com/watch?v=xB-eutXNUMXJtA&feature=youtu.be funciona bien. No estoy seguro de lo que me perdí en el momento en que lo probé.

Tenga en cuenta que esta respuesta usa Microsoft Ajax, no jQuery

contestado el 23 de mayo de 17 a las 15:05

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

$('#isAgeSelected').prop('checked') regresará true si está marcado y false si no está marcado. Lo confirmé y me encontré con este problema antes. $('#isAgeSelected').attr('checked') y $('#isAgeSelected').is('checked') está regresando undefined que no es una respuesta digna para la situación. Así que haz lo que se indica a continuación.

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

Espero que te ayude :) - Gracias.

Respondido el 12 de Septiembre de 15 a las 19:09

Uso:

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

Esto puede ayudar si desea que la acción requerida se realice solo cuando marque la casilla, no en el momento de quitar la marca.

Respondido 29 Oct 18, 13:10

Usando el patrón de velas del Click El controlador de eventos para la propiedad de casilla de verificación no es confiable, ya que el checked La propiedad puede cambiar durante la ejecución del propio controlador de eventos.

Idealmente, querría poner su código en un change controlador de eventos como se activa cada vez que se cambia el valor de la casilla de verificación (independientemente de cómo ya está hecho).

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

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

Respondido 30 Oct 16, 20:10

Decidí publicar una respuesta sobre cómo hacer exactamente 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 ambos elementos por su ID. Luego asigna las casillas de verificación onchange evento una función que comprueba si la casilla de verificación se marcó y establece el hidden propiedad del campo de texto de edad de forma adecuada. En ese ejemplo usando el operador ternario.

Aquí hay una violín para que lo pruebes.

Apéndice

Si la compatibilidad entre navegadores es un problema, propongo configurar el CSS display propiedad a ninguna y en línea.

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

Más lento pero compatible con varios navegadores.

Respondido 05 Abr '12, 19:04

Creo que podrías hacer esto:

if ($('#isAgeSelected :checked').size() > 0)
{
    $("#txtAge").show(); 
} else { 
    $("#txtAge").hide();
}

contestado el 23 de mayo de 09 a las 19:05

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

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

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

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

Estoy seguro de que también puede usar el ID en lugar de CssClass,

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

Espero que esto te ayude.

contestado el 25 de mayo de 11 a las 14:05

Este código te ayudará

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

Respondido el 03 de Septiembre de 19 a las 07:09

Hay muchas formas de comprobar si una casilla de verificación está marcada o no:

Manera de verificar usando jQuery

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

Ver ejemplo o también documento:

Respondido 30 Oct 16, 20:10

Esto funciona para mi:

/* isAgeSelected being id for checkbox */

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

Respondido 30 Oct 16, 20:10

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

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

Respondido 30 Oct 16, 20:10

Puedes probar el change evento de casilla de verificación para rastrear el :checked cambio de estado.

$("#isAgeSelected").on('change', function() {
  if ($("#isAgeSelected").is(':checked'))
    alert("checked");
  else {
    alert("unchecked");
  }
});
<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>

Respondido el 23 de Septiembre de 20 a las 18:09

Utilizar esta:

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

La longitud es mayor que cero si la casilla de verificación está marcada.

Respondido el 16 de enero de 17 a las 11:01

Mi forma de hacer esto es:

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

Respondido 06 Abr '15, 23:04

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

Esto vuelve true si la entrada está marcada y false si no es.

respondido 21 mar '13, 15:03

$(document).ready(function() {    
    $('#agecheckbox').click(function() {
        if($(this).is(":checked"))
        {
            $('#agetextbox').show();
        } else {
            $('#agetextbox').hide();
        }
    });
});

respondido 26 nov., 14:18

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.

Respondido el 21 de Septiembre de 16 a las 18:09

1) Si su marcado HTML es:

<input type="checkbox"  />

attr utilizado:

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

Si se usa prop:

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

2) Si su marcado HTML es:

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

attr utilizado:

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

Prop utilizado:

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

Respondido 30 Oct 16, 20:10

Este es un problema REAL. Mi solución alternativa: agregue un evento de cambio a la entrada: luego use ese evento para cambiar una variable JavaScript booleana y use la variable JavaScript en lugar de consultar la casilla de verificación directamente. - Graham Laight

Este ejemplo es para button.

Intente lo siguiente:

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

Respondido el 02 de junio de 16 a las 17:06

La respuesta principal no lo hizo por mí. Sin embargo, esto hizo:

<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, verifica si el elemento # de acuerdo (que es la casilla de verificación) está marcado mediante .attr('checked') función. Si es entonces fadeIn el elemento #saveForm, y si no es fadeOut el elemento saveForm.

Respondido 30 Oct 16, 20:10

Aunque ha propuesto una solución de JavaScript para su problema (mostrando un textbox cuando un checkbox is checked), este problema podría resolverse solo por 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" />

Puede utilizar el siguiente CSS para lograr la funcionalidad deseada:

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

Para otros escenarios, puede pensar en selectores CSS apropiados.

Aquí hay un violín para demostrar este enfoque..

Respondido 30 Oct 16, 20:10

Estoy usando esto:

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

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

Respondido 30 Oct 16, 20:10

Alternar: 0/1 o si no

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

contestado el 05 de mayo de 15 a las 11:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.