¿Cuál es la diferencia entre hacer clic en una casilla de verificación y llamar a su función '.click()'?

Question

Considere the following code:

HTML:

<input type='checkbox' /> 
<div>Click here</div> 

JS:

$(function() { 
    $('input').click(function() { 
     document.write($(this).is(':checked') ? "checked" : "unckecked"); 
    }); 
    $('div').click(function() { 
     $('input').click(); 
    }); 
}); 

Cuando se hace clic en la casilla de verificación, la salida es checked, pero si "aquí" se hace clic en la salida es unckecked . ¿Porqué es eso?

Answer 1

Porque el evento click es diferente del evento change, que es donde cambia el elemento. Cuando el <div> hace un .click() se desencadena el evento click que aún no ha cambiado el estado de la casilla de verificación para que cuando lo compruebe esté en el estado anterior.

Al hacer clic directamente en el <input>, que ya ha cambiado el estado, incluso si el segundo incendios change de eventos con el fin, el punto principal es checked las casillas de verificación de estado ha cambiado, antes es el manejador de click verificando, así que el estado es actual.

Si quieren información de estado precisa buscar y desencadenar el evento change lugar, como este:

$(function() { 
    $('input').change(function() { 
     $("span").append("<br />" + (this.checked ? "Checked" : "Uncecked")); 
    }); 
    $('div').click(function() { 
     $('input').click().change(); 
    }); 
}); 

You can give it a try here, en la remota posibilidad de que esta no es una cuestión de comportamiento y que está queriendo una externa área seleccionable, this is how I'd do it (a través de <label> envolviendo la entrada).