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

4551

Necesito verificar la checkedpropiedad 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 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 regresa falsepor 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 la checkedpropiedad?

Prasad
fuente
14
$ ('# isAgeSelected') devuelve la colección, reemplácela con: $ ('# isAgeSelected') [0] .checked
zamoldar
14
por qué no$('#isAgeSelected').checked
Don Cheadle
1
Para obtener una respuesta completa (y correcta), consulte: stackoverflow.com/questions/426258/…
Paul Kenjora
12
Dado que los selectores jQuery devuelven la matriz, puede usar$('#isAgeSelected')[0].checked
Felipe Leão
2
para mí, el siguiente ajuste funcionó: reemplazar .attr ('verificado') con .is (': marcado')
Mark N Hopgood

Respuestas:

3433

¿Cómo consulto con éxito la propiedad marcada?

La checkedpropiedad de un elemento DOM de casilla de verificación le dará el checkedestado 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 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>

karim79
fuente
36
También probé la condición anterior, pero solo devuelve falso
Prasad
24
$ ("# txtAge"). alternar (this.checked); Hace exactamente lo mismo que $ ("# txtAge"). Toggle (). Entonces, si por alguna razón el estado está marcado y el siguiente div está oculto (hizo clic en el botón Atrás en su navegador), no funcionará como se esperaba.
Maksim Vi.
23
@Chiramisu: si hubiera leído la respuesta hasta el final, se habría dado cuenta de que mi edición no utiliza el is(':checked')negocio.
karim79
8
para establecer: $ ("# chkmyElement") [0] .checked = true; obtener: if ($ ("# chkmyElement") [0] .checked)
JJ_Coder4Hire
28
Esta no es una respuesta a la pregunta. this.checkedno es jQuery, como lo solicitó el OP. Además, solo funciona cuando el usuario hace clic en la casilla de verificación, que no es parte de la pregunta. La pregunta es, nuevamente, How to check whether a checkbox is checked in jQuery?en cualquier momento dado con o sin hacer clic en la casilla de verificación y en jQuery.
Marc Compte
1847

Use la función is () de jQuery :

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked
Bhanu Krishnan
fuente
19
Si no necesita duración, alivio, etc., puede usarlo $("#txtAge").toggle($("#isAgeSelected").is(':checked'))
naor
13
+1 hay diferentes formas de verificar la propiedad. Algunos se enumeran aquí
user3199690
En realidad @NickG jQuery hace tener un selector: visibles
hvdd
2
@hvdd Lo sé: dije "propiedad", no selector.
NickG
@ Nickick ... No entiendo lo que quieres decir. jQuery no tiene .visible"propiedad" ( propiedad ? quiere decir método ?) porque el elemento sin HTML tiene una propiedad visible Tienen una display propiedad de estilo y es un poco más complejo que activar / desactivar.
xDaizu
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 el nuevo método de propiedad:

if($('#checkMeOut').prop('checked')) {
    // something when checked
} else {
    // something else when not
}
SeanDowney
fuente
27
Me gustaría saber por qué esta no es la respuesta ... si está utilizando jquery, entonces el .propmétodo es la forma diseñada para verificar los accesorios. .. ... Si vas a hacer el .is(":checked")enfoque, está bien, pero no es la forma diseñada para hacerlo usando jquery. ¿Correcto?
dsdsdsdsd
1
@dsdsdsdsd presumiblemente porque necesita otro paso de compatibilidad con versiones anteriores (ahora estoy enfrentando el mismo problema).
user98085
18
.is(":checked")y .prop("checked")son dos formas válidas de obtener el mismo resultado en jQuery, .isfuncionará en todas las versiones, .proprequiere 1.6+
gnarf
Si lo usa .attr('checked')en jQuery 1.11.3, quedará indefinido, donde si lo 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 se introdujeron .prop()y, por lo tanto, lo necesitan .attr(). La única gracia salvadora es que los navegadores más antiguos (es decir, IE 8) no pueden soportar nada> jQuery 1.9. ¡Esperemos que no hayan hecho esto (make .attr('checked')= undefined) en esa versión! Afortunadamente, siempre hay this.checked.
vapcguy
230

jQuery 1.6+

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

jQuery 1.5 y abajo

$('#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 .

ungalcrys
fuente
8
Técnicamente, this.checkedestá usando Javascript directo. ¡Pero me encanta esa respuesta cross-jQuery-version!
vapcguy
170

Estoy usando esto y esto está funcionando absolutamente bien:

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

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

Pradeep
fuente
66
Esto funciona porque $ ("# checkkBoxId"). Attr ("marcado") devuelve "marcado" o "" (cadena vacía). Y una cadena vacía es falsa, la cadena no vacía es verdadera, consulte los valores de verdad
Adrien Be
77
Por jquery 2.1.x devuelve siempre verificado si está marcado por defecto ... No sé si este comportamiento es intencional, pero seguramente no funciona (supongo que es un error) ... El val () tampoco funciona, se queda "encendido". El prop () funciona correctamente y dom.checked funciona.
inf3rno
1
¡Y el problema surge cuando tienes que soportar navegadores más antiguos .attr()! Si solo se hubieran dejado lo suficientemente solos ... Encontramos otra respuesta aquí que dice que puedes usar this.checkedpara una solución cross-jQuery, ya que es básicamente Javascript.
vapcguy
.attr ('marcado') probará si está marcado por defecto, sí. Porque está comprobando el atributo html , no el estado actual. La versión anterior era un error (aunque supongo que se explotó mucho).
Jay Irvine
149

Utilizar:

<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

Lalji Dhameliya
fuente
119

Desde jQuery 1.6, el comportamiento de jQuery.attr()ha cambiado y se recomienda a los usuarios que no lo usen para recuperar el estado verificado de un elemento. En su lugar, debe 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")
Salman A
fuente
y $ ("# txtAge") [0] .checked
Yevgeniy Afanasyev
101

Esto funcionó para mí:

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

¿Dónde isAgeSelectedestá la identificación del control?

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

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

Prasad
fuente
44
En todos los casos, en todos los lenguajes de programación normales, puede omitir== true
RedPixel
@RedPixel A menos que esté tratando con tipos anulables. :) (smiley pedante)
Kolob Canyon
88

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

$('#isAgeSelected').prop('checked')volverá truesi está marcado y falsesi no está marcado. Lo confirmé y me encontré con este problema antes. $('#isAgeSelected').attr('checked')y $('#isAgeSelected').is('checked')está regresando, lo undefinedcual no es una respuesta digna para la situación. Entonces, haga lo que se indica a continuación.

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

Espero que ayude :) Gracias.

Rajesh Omanakuttan
fuente
¿por qué no $('#isAgeSelected').checked?
Don Cheadle
1
para usar .is necesitas dos puntos $ ('# isAgeSelected'). is (': marcado')
Patrick
62

Utilizando el Click controlador de eventos para la propiedad de casilla de verificación no es confiable, ya que la checkedpropiedad puede cambiar durante la ejecución del controlador de eventos.

Idealmente, desearía poner su código en un changecontrolador de eventos, ya que se activa cada vez que se cambia el valor de la casilla de verificación (independientemente de cómo se haga).

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

   if ($(this).is(':checked'))
     $("#txtAge").show();
   else
     $("#txtAge").hide();
});
arviman
fuente
3
A partir de jQuery 1.7, el .on()método es el método preferido para adjuntar controladores de eventos a un documento.
naor
61

Utilizar:

<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 y no en el momento en que la quite.

UDB
fuente
53

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ónonchange evento una función que verifica si la casilla de verificación se marcó y establece la hiddenpropiedad del campo de texto de edad de manera adecuada. En ese ejemplo usando el operador ternario.

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

Apéndice

Si la compatibilidad entre navegadores es un problema, propongo establecer la displaypropiedad CSS en none e inline .

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

Más lento pero compatible con varios navegadores.

Octavian A. Damiean
fuente
Bueno, .hiddenno es muy cruzado, aunque me gusta esta solución :)
Florian Margaine
De hecho, es la mejor manera de usar style. Sin embargo, eso es lamentable, ya que el .hiddenrendimiento es mucho mejor .
Florian Margaine
Asignación dentro de un operador condicional? Legal, si. Sin embargo, no es lo que yo llamaría buen estilo.
Jules
puede simplificarse a: ageInput.hidden =! this.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 ellos)
JoelFan
52

Creo que podrías hacer esto:

if ($('#isAgeSelected :checked').size() > 0)
{
    $("#txtAge").show(); 
} else { 
    $("#txtAge").hide();
}
xenón
fuente
alert ($ ('input [name = isAgeSelected]'). attr ('check')); El código anterior muestra verdadero / falso basado en la verificación. Cualquier problema con los intentos anteriores
Prasad
Prasad, ¿está haciendo referencia a su casilla de verificación por nombre o ID? Me estoy confundiendo ahora ...
karim79
¿No puedes darle una identificación? Las cosas serían mucho más fáciles, en su ejemplo, debe abordarlo por su ID
xenón
El método .size () está en desuso a partir de jQuery 1.8. ¡Use la propiedad .length (with no () ;-) en su lugar! Y quizás tengas que mantenerte unido "#isAgeSelected: marcado".
François Breton
47

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

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

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

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

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

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

Espero que esto te ayude.

Nertim
fuente
46

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

Forma de verificar usando jQuery

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

Consultar ejemplo o también documento:

Parth Chavda
fuente
46

Este código te ayudará

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

Esto funciona para mi:

/* isAgeSelected being id for checkbox */

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

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>

Sangeet Shah
fuente
35

Utilizar este:

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

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

Hamid NK
fuente
33

Mi forma de hacer esto es:

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}
Dalius I
fuente
31
$(selector).attr('checked') !== undefined

Esto vuelve truesi la entrada está marcada y falsesi no lo está.

fe_lix_
fuente
44
Entiendo por qué esto podría funcionar en ciertos escenarios, aunque tiene el mismo problema .attr('checked')que no siempre devuelve el estado correcto. Según la respuesta de Salman A (y tal vez la de otros), es una opción más segura de usar . Además, también es posible declarar como . .prop('checked')undefinedvar undefined = 'checked';
WynandB
.prop('checked')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 volver a declarar indefinido.
fe_lix_
Como nota al margen, la comprobación de indefinido es mejor contypeof (x) !== "undefined"
naor
En ese caso, creo que es más preciso y más fácil de leer con! ==. Usaría el typeof (x) solo al probar una variable que puede o no haberse definido en el pasado.
fe_lix_
30
$(document).ready(function() {    
    $('#agecheckbox').click(function() {
        if($(this).is(":checked"))
        {
            $('#agetextbox').show();
        } else {
            $('#agetextbox').hide();
        }
    });
});
Jumper Pot
fuente
30

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.

Muhammad Awais
fuente
27

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 utilería:

$(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"
Somnath Kharat
fuente
Este es un problema REAL. Mi solución alternativa: 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 la casilla de verificación directamente.
Graham Laight
24

Este ejemplo es para el botón.

Intenta 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);
    }
});
});
usayee
fuente
24

La respuesta principal no lo hizo por mí. Esto hizo 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 verifica si el elemento # de acuerdo (que es la casilla de verificación) se marca mediante la .attr('checked')función. Si es entonces fadeIn en el elemento #saveForm, y si no es fadeOut en el elemento saveForm.

BigHomie
fuente
22

Estoy usando esto:

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

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

Aunque ha propuesto una solución de JavaScript para su problema (mostrando un textboxcuando checkboxes checked), este problema podría resolverse simplemente con css . Con este enfoque, su formulario funciona para los 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 usar el siguiente CSS para lograr la funcionalidad deseada:

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

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

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

Ormoz
fuente
21

Toggle: 0/1 o bien

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

Creo que será el simple.

$('#isAgeSelected').change(function() {
    if($(this).is(":checked")) {
        $('#txtAge').show();
    }
else{
        $('#txtAge').hide();
    }                                          
});
Jitendra Damor
fuente