seleccionado esta no checkbox saber ¿Cómo verificar si una casilla está marcada en jQuery?



15 Answers

Usa la función is() jQuery:

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked
verificar si varios checkbox esta seleccionado jquery

Necesito marcar 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 la edad está marcada, entonces necesito mostrar un cuadro de texto para ingresar la edad; de lo contrario, oculte el cuadro de texto.

Pero el siguiente código devuelve false por defecto:

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

¿Cómo puedo consultar con éxito la propiedad checked ?




jQuery 1.6+

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

jQuery 1.5 y por debajo

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

Cualquier versión de jQuery

// Assuming an event handler on a checkbox
if (this.checked)

Todo el crédito es para Xian .




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




Esto funcionó para mí:

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

Donde isAgeSelected es el id 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




¡Usar el controlador de eventos Click para la propiedad checkbox no es confiable, ya que la propiedad seleccionada puede cambiar durante la ejecución del controlador de eventos en sí!

Idealmente, querría poner su código en un controlador de eventos de change , tal como 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();
});



Creo que podrías hacer esto:

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



Me encontré con 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 como un encanto.

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

Estoy seguro de que también puede utilizar la ID en lugar de la clase Css,

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

Espero que esto te ayude.




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 este código:

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



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




La respuesta superior 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 # concuerda (que es la casilla de verificación) se .attr('checked') mediante la función .attr('checked') . Si es, entonces fadeIn el elemento #saveForm, y si no es fadeOut el elemento saveForm.




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



Aunque ha propuesto una solución de JavaScript para su problema (mostrar un textbox cuando se textbox una checkbox checked ), este problema podría resolverse solo con CSS . Con este enfoque, su formulario funciona para 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" />

Puedes 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 de CSS apropiados.

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




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

o

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





Related