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

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

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

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.

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

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

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.

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

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

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

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

JSFIDDLE

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.

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

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

});

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!

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

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