jquery saber validar - ¿Cómo verificar si una casilla está marcada en jQuery?




15 Answers

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

La propiedad checked de un elemento DOM de casilla de verificación le dará el estado checked 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 la 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>

js javascript

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 ?




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
}



Estoy usando esto y esto funciona absolutamente bien:

$("#checkkBoxId").attr("checked") ? alert("Checked") : alert("Unchecked");

Nota: Si la casilla de verificación está marcada, devolverá verdadero si no está definido, así que mejor compruebe el valor "VERDADERO".




Desde jQuery 1.6, el comportamiento de jQuery.attr() ha cambiado y se recomienda a los usuarios que no lo utilicen para recuperar el estado verificado de un elemento. En su lugar, 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")



Si está utilizando una versión actualizada de jquery, debe .prop método .prop 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á devolviendo undefined que no es una respuesta $('#isAgeSelected').is('checked') 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.




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 identificación. Luego, asigna el evento onchange la casilla de verificación a una función que verifica si la casilla de verificación se marcó y establece la propiedad hidden del campo de texto de edad de manera apropiada. En ese ejemplo se usa el operador ternario.

Aquí hay un fiddle para que lo pruebes.

Apéndice

Si la compatibilidad entre navegadores es un problema, propongo establecer la propiedad de display CSS en ninguna y en línea .

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

Más lento pero compatible con varios navegadores.




Hay muchas formas de verificar si una casilla está marcada o no:

Manera de comprobar usando jQuery

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

Ver ejemplo o documento:




Esto funciona para mí:

/* isAgeSelected being id for checkbox */

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



Utilizar esta:

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

La longitud es mayor que cero si la casilla está marcada.




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

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




Mi forma de hacer esto es:

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



Este ejemplo es para 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);
    }
});
});



1) Si su marca HTML es:

<input type="checkbox"  />

attr utilizado:

$(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set

Si se utiliza apoyo:

$(element).prop("checked"); // Will give you false whether or not initial value is set

2) Si su marca 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"

Apoyo utilizado:

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



Estoy usando esto:

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

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



Creo que será el sencillo.

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



Related