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

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?

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

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

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".

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

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

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

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.

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

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.

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.

Creo que podrías hacer esto:

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

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.

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:

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

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

Este código te ayudará

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

Esto funciona para mi:

/* 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>

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.

Mi forma de hacer esto es:

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

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

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

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

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.

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"

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

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.

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

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

Creo que será el simple.

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