validate - validar varios checkbox jquery

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

Question

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 ?

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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 .

Answer 5

Creo que podrías hacer esto:

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

Answer 6

Creo que será el sencillo.

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

Answer 7

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.

Answer 8

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

Answer 9

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

Answer 10

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>

Answer 11

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

Answer 12

Esto funciona para mí:

/* isAgeSelected being id for checkbox */

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

Answer 13

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

Answer 14

Estoy usando esto:

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

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

Answer 15

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:

• jQuery.attr()

• jQuery.prop()

Answer 16

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.

Answer 17

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.

Answer 18

Mi forma de hacer esto es:

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

Answer 19

Puedes usar este código:

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

Answer 20

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.

Answer 21

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.

Answer 22

Usa la función is() jQuery:

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

Answer 23

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
}

Answer 24

Utilizar esta:

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

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

Answer 25

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

Answer 26

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"

Answer 27

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 .

Answer 28

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

Answer 29

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

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

Answer 30

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

o

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