jQuery comprobar una casilla de verificación y activar Javascript evento onclick

Question

Estoy intentando comprobar una casilla de verificación con jQuery y desencadenar el evento onclick en el proceso.

decir que tengo una casilla de verificación definido en html:

<input type="checkbox" value="checked" name="check1" onclick="alert(this.value);"> 

Y tengo una declaración de jQuery que se desencadena en una función:

$('input[name=check1]').attr('checked', true); 

El resultado es la casilla de verificación se comprueba pero el javascript el evento onclick no se dispara (por lo tanto, no hay alerta). Pero si tuviera que activar el clic, incluso de forma manual como tal:

$('input[name=check1]').attr('checked', true).trigger('click'); 

El resultado es la casilla de verificación consigue comprobado, javascript evento onclick se activa (y el valor se incorpora correctamente) pero luego la casilla de verificación se desmarcada después de eso.

¿Puede alguien decirme cómo puedo lograr lo que estoy tratando de hacer?

Answer 1

Uso .triggerHandler() en lugar de .trigger():

$('input[name=check1]').attr('checked', true).triggerHandler('click'); 

También, el uso .prop() en lugar de .attr(): (. Si estás usando jQuery 1.6 o más reciente)

$('input[name=check1]').prop('checked', true).triggerHandler('click'); 

edición — Además, como comenté en otra respuesta, debes tener cuidado con el extraño comportamiento de jQuery cuando se activan eventos programáticamente. Here is an illustrative jsfiddle. Cuando ocurre un "clic" real en un elemento, el controlador "clic" del elemento verá el valor actualizado de la marca "marcada". Es decir, si hace clic en una casilla de verificación no marcada, el controlador de clic verá el indicador "marcado" establecido en true. Sin embargo, si activa "hacer clic" en una casilla de verificación sin marcar a través de jQuery, el manejador "clic" verá el indicador "marcado" establecido en false. Eso es algo muy malo, en mi opinión, pero siempre lo hace.

editar nuevamente — Ah, también, se me olvidó otra importante (e irritante) rarezas jQuery: por razones desconocidas, la API .triggerHandler() sólo se invocará manipuladores en el primer elemento emparejado. Si intenta activar todas las casillas de verificación "clic" manipuladores, en otras palabras:

$('input:checkbox').triggerHandler('click'); 

continuación, se disparará sólo la primera casilla de verificación en la página. Lo que generalmente hago con el fin de hacer frente a la locura es enlazar el controlador con mi propio nombre del evento falsa, así como "clic":

$('input:checkbox').bind('click my-click', function() ...) // or ".on()" with 1.7 

De esa manera puedo desencadenar "mi-clic" y obtener lo mejor de ambos mundos: la biblioteca activa el controlador en todos los elementos coincidentes, pero no alternará el estado real de los elementos.

Answer 2

Cambio:

$('input[name=check1]').attr('checked', true).trigger('click'); 

Para:

$('input[name=check1]').trigger('click').prop('checked', true); 

Answer 3

this answer parece funcionar bien:

$('input[name=check1]').attr('checked', true).change();

jsFiddle demo

Answer 4

.on('changed', ...) es, definitivamente, lo que deberías vincular a los elementos de la casilla de verificación (se comporta de manera mucho más razonable). A continuación, puede activar manualmente un .click() en los elementos que desea alternar el estado de para ver el desencadenante de evento adecuado (y ver el DOM en un estado coincidente con lo que esos controladores también vieron).

<input type="checkbox" value="checked" name="check1"> 
<script> 
    $('input').on('change', function(e) {alert(e.target.value);}); 
    $('input').click(); 
    // see the alert, and if you checked $(e.target).is(':checked') you should get true 
</script>