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


Necesito verificar el checked propiedad de una casilla de verificación y realizar una acción basada en la propiedad marcada utilizando 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 devuelve false por defecto:

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

¿Cómo consulto con éxito el checked ¿propiedad?


3914


origen


Respuestas:


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

los 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 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>


3099



Use jQuery's es() función:

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

1549



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
}

472



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.


177



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, se mostrará como verdadera, sin definir, por lo que es mejor verificar el valor "VERDADERO".


148



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


114



Desde jQuery 1.6, el comportamiento de jQuery.attr() ha cambiado y se anima a los usuarios a no usarlo para recuperar el estado verificado de un elemento. En cambio, debes 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")

105



Esto funcionó para mí:

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

Dónde isAgeSelected es la identificación del control

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

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


82



Si está utilizando una versión actualizada de jquery, debe ir 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á volviendo undefined que no es una respuesta digna para la situación. Haz lo que se indica a continuación.

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

Espero que ayude:) - Gracias.


79



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

Idealmente, querrías poner tu código en una change controlador de eventos tal como se activa cada vez que se cambia el valor de la casilla de verificación (independiente de cómo ya está hecho).

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

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

54



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 verifica si se marcó la casilla de verificación y establece el hidden propiedad del campo de texto de edad apropiadamente. 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, entonces propongo establecer 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.


49