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


Answers

Use la función jQuery's is() :

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

Necesito comprobar 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 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();
}}

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




Estoy usando esto:

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

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



Este ejemplo es para el botón.

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



Hay muchas maneras de verificar 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 documentar:




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>




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.




Creo que podrías hacer esto:

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



Creo que será el simple

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



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

Esto devuelve true si la entrada está marcada y false si no lo está.




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 comprueba si el elemento # de acuerdo (que es la casilla de verificación) se comprueba con la función .attr('checked') . Si es entonces, fadeIn el elemento #saveForm, y si no se desvanece en el elemento saveForm.




Esto funcionó para mí:

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

Donde isAgeSelected es la identificación del control.

Además, la answer @karim79 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




Mi forma de hacer esto es:

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



El uso del controlador de eventos Click para la propiedad checkbox no es confiable, ya que la propiedad checked puede cambiar durante la ejecución del manejador de eventos.

Lo ideal es que coloque el código en un controlador de eventos de change , como el 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();
});



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



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 mérito es para Xian .




Links