jQuery, casillas de verificación y .is (": marcado")


88

Cuando vinculo una función a un elemento de casilla de verificación como:

$("#myCheckbox").click( function() {
    alert($(this).is(":checked"));
});

La casilla de verificación cambia su atributo marcado antes de que se active el evento, este es el comportamiento normal y da un resultado inverso.

Sin embargo, cuando lo hago:

$("#myCheckbox").click();

La casilla de verificación cambia el atributo marcado después de que se activa el evento.

Mi pregunta es, ¿hay alguna manera de activar el evento de clic de jQuery como lo haría un clic normal (primer escenario)?

PD: ya lo he probado trigger('click');


5
Acabo de verificar esto. Estás completamente en lo correcto. Eso parece que podría ser un error. Lo plantearía como un error con jQuery y vería qué sucede dev.jquery.com
cletus

1
¿Qué pasa con el evento de 'cambio'?
ZippyV

@cletus De hecho, es un error de Jquery 1.4.2. 1.3.2 funciona bien.
Ben

Veo el mismo comportamiento tanto en 1.4.2 como en 1.3.2: jsfiddle.net/HCUNn
Nick Craver

@Nick Todavía hace lo contrario de lo que haría un clic normal del mouse. Honestamente, no sé por qué 1.3.2 funciona para mí y 1.4.2 no, pero aún así, eso debe cambiarse.
Ben

Respuestas:


98
$('#myCheckbox').change(function () {
    if ($(this).prop("checked")) {
        // checked
        return;
    }
    // not checked
});

Nota: en versiones anteriores de jquery estaba bien usarlo attr. Ahora se sugiere usarloprop para leer el estado.


1
Lo he intentado, "$ (# myCheckbox) .click ()" desmarca / marca la casilla, pero la función de cambio nunca se activa. También intenté cambiar el atributo 'marcado' en lugar de llamar a click () e incluso configurar la función 'cambiar' en 'en vivo'.
Ben

@Ben: debe activarlo de una manera diferente para que esto se ejecute, vea mi respuesta para la declaración de activación.
Nick Craver

@Nick Gracias, aceptaré la respuesta de tcurdt ya que fue el primero en salir con la solución. Tonto de mí, no activé el método de 'cambio'.
Ben

19
y para las versiones más nuevas de jquery, la función es prop ("comprobado") en lugar de attr ("comprobado") en caso de que atrape a alguien más.
danski

Evitaría 'prop' debido a la no compatibilidad con versiones anteriores, esp. en IE.
vapcguy

27

Hay una solución alternativa que funciona en jQuery 1.3.2 y 1.4.2 :

$("#myCheckbox").change( function() {
    alert($(this).is(":checked"));
});

//Trigger by:
$("#myCheckbox").trigger('click').trigger('change');​​​​​​​​​​​​​

Pero estoy de acuerdo, este comportamiento parece defectuoso en comparación con el evento nativo.


10

En junio de 2016 (usando jquery 2.1.4) ninguna de las otras soluciones sugeridas funciona. La comprobación attr('checked')siempre vuelve undefinedy is('checked)siempre vuelve false.

Solo usa el método prop:

$("#checkbox").change(function(e) {

  if ($(this).prop('checked')){
    console.log('checked');
  }
});

2
is('checked)devolverá falso porque "comprobado" no es un pseudo selector de CSS. El correcto debería ser is(':checked')para que busque ": comprobado" en su lugar.
Dhaupin

4

Sigo experimentando este comportamiento con jQuery 1.7.2. Una solución alternativa sencilla es aplazar la ejecución del controlador de clics con setTimeout y dejar que el navegador haga su magia mientras tanto:

$("#myCheckbox").click( function() {
    var that = this;
    setTimeout(function(){
        alert($(that).is(":checked"));
    });
});

¡Sí! Un poco fuera de tema, pero tuve que hacer lo mismo en las cuadrículas de Kendo con casillas de verificación cuando alguien hacía clic en "Agregar nuevo registro" si quería que estuviera "Activo" por defecto. También tuve que darle un tiempo de 500ms. Luego he tenido que añadir .click(), a continuación, establecer .attr('value', 'true'), a continuación .change(), a continuación, .blur()antes de que se establecería mediante programación la caja cuando hice clic en el botón "Actualizar" mediante programación ....
vapcguy

2

Si anticipa este comportamiento bastante no deseado, entonces una alternativa sería pasar un parámetro adicional de jQuery.trigger () al controlador de clic de la casilla de verificación. Este parámetro adicional es para notificar al controlador de clics que el clic se ha activado mediante programación, en lugar de que el usuario haga clic directamente en la casilla de verificación. El controlador de clic de la casilla de verificación puede invertir el estado de verificación informado.

Así que así es como activaría el evento de clic en una casilla de verificación con el ID "myCheckBox". Tenga en cuenta que también estoy pasando un parámetro de objeto con un solo miembro, nonUI, que se establece en verdadero:

$("#myCheckbox").trigger('click', {nonUI : true})

Y así es como lo manejo en el controlador de eventos de clic de la casilla de verificación. La función de controlador comprueba la presencia del objeto que no es de interfaz de usuario como segundo parámetro. (El primer parámetro es siempre el evento en sí). Si el parámetro está presente y se establece en verdadero, invierto el estado .checked informado. Si no se pasa tal parámetro, lo cual no ocurrirá si el usuario simplemente hace clic en la casilla de verificación en la interfaz de usuario, entonces informo el estado real .checked:

$("#myCheckbox").click(function(e, parameters) {
   var nonUI = false;
        try {
            nonUI = parameters.nonUI;
        } catch (e) {}
        var checked = nonUI ? !this.checked : this.checked;
        alert('Checked = ' + checked);
    });

Versión de JSFiddle en http://jsfiddle.net/BrownieBoy/h5mDZ/

Lo he probado con Chrome, Firefox e IE 8.


2
<input id="widget-wpb_widget-3-custom_date" class="mycheck" type="checkbox" value="d/M/y" name="widget-wpb_widget[3][custom_date]" unchecked="true">    

var atrib = $('.mycheck').attr("unchecked",true);
$('.mycheck').click(function(){
if ($(this).is(":checked")) 
{
$('.mycheck').attr("unchecked",false);
   alert("checkbox checked");
}
else
{
$('.mycheck').attr("unchecked",true);
 alert("checkbox unchecked");
}
});

Algunos comentarios serían agradables
Danil Gaponov

1
  $("#checkbox").change(function(e) {

  if ($(this).prop('checked')){
    console.log('checked');
  }
});

1
$("#personal").click(function() {
      if ($(this).is(":checked")) {
            alert('Personal');
        /* var validator = $("#register_france").validate(); 
        validator.resetForm(); */
      }
            }
            );

JSFIDDLE


0

Bueno, para que coincida con el primer escenario, esto es algo que se me ocurrió.

http://jsbin.com/uwupa/edit

Esencialmente, en lugar de vincular el evento "clic", vincula el evento "cambiar" con la alerta.

Luego, cuando activa el evento, primero activa el clic y luego activa el cambio.


0

Además de la respuesta de Nick Craver, para que esto funcione correctamente IE 8, debe agregar un controlador de clic adicional a la casilla de verificación:

// needed for IE 8 compatibility
if ($.browser.msie)
    $("#myCheckbox").click(function() { $(this).trigger('change'); });

$("#myCheckbox").change( function() {
    alert($(this).is(":checked"));
});

//Trigger by:
$("#myCheckbox").trigger('click').trigger('change');

De lo contrario, la devolución de llamada solo se activará cuando la casilla de verificación pierda el foco, ya que IE 8mantiene el foco en las casillas de verificación y radios cuando se hace clic en ellas.

IE 9Aunque no lo he probado .


0
$( "#checkbox" ).change(function() {
    if($(this).is(":checked")){
        alert('hi');
    }

});

1
Por favor mencione algunos detalles
CodeWarrior

Parece que esto es solo una respuesta repetida, usando en changelugar de los OP click, y solo usa una ifdeclaración como una forma diferente de probar :checked.
vapcguy

-1

La forma más rápida y sencilla :

$('#myCheckbox').change(function(){
    alert(this.checked);
});

$el[0].checked;

$ el - es el elemento jquery de selección.

¡Disfrutar!


-2
if ($.browser.msie) {
    $("#myCheckbox").click(function() { $(this).trigger('change'); });
}

$("#myCheckbox").change(function() {
        alert($(this).is(":checked"));
    });
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.