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

¿Cómo puedo consultar correctamente la propiedad marcada?

La propiedad checked de un elemento checkbox DOM le dará el estado checked del elemento.

Dado tu código existente, podrías 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>

Use la función is() de jQuery:

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

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
}

JQuery 1.6+

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

JQuery 1.5 y versiones anteriores

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

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á true de lo contrario indefinido, así que mejor verifique el valor "TRUE".

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

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 marcado 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")

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

$('#isAgeSelected').prop('checked') devolverá 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 ayude :)- Gracias.

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

Lo ideal sería poner su código en un controlador de eventos change tal como se activa cada vez que se cambia el valor de la casilla de verificación (independientemente de cómo se hace).

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

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

Decidí publicar una respuesta sobre cómo hacer exactamente lo mismo sin jQuery. Sólo 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 el evento onchange del checkboxe a una función que comprueba si la casilla de verificación se ha marcado y establece la propiedad hidden del campo de texto age apropiadamente. En ese ejemplo usando el operador ternario.

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

Adición

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

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

Más lento pero compatible con varios navegadores.

Creo que podrías hacer esto:

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

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

Forma de comprobar usando jQuery

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

Compruebe ejemplo o también documento:

• Http://api.jquery.com/attr/

• Http://api.jquery.com/prop/

Me encontré exactamente con el mismo problema. Tengo un ASP.NET casilla

<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 como un encanto.

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

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

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

Espero que esto te ayude.

Esto funciona para mí:

/* isAgeSelected being id for checkbox */

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

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>

Usa esto:

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

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

Puedes usar este código:

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

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

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

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

Mi manera de hacer esto es:

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

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.

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

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

1) Si su marcado HTML es:

<input type="checkbox"  />

Attr usado:

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

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

Apoyo utilizado:

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

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

Estoy usando esto:

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

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

Aunque ha propuesto una solución JavaScript para su problema (mostrando un textbox cuando un checkbox es checked), este problema podría resolverse solo con css. Con este enfoque, su formulario funciona para los usuarios que han deshabilitado JavaScript.

Asumiendo que tienes 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 selectores CSS apropiados.

Aquí está un Fiddle to demonstrate this approach .

if($("#checkkBoxId").is(':checked')){
  alert("Checked=true");
}

O

if($("#checkkBoxId").attr('checked') == true){
  alert("checked=true");
}

Creo que será el simple

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