jQuery checkbox evento de manejo

Tengo lo siguiente:

<form id="myform">
   <input type="checkbox" name="check1" value="check1">
   <input type="checkbox" name="check2" value="check2">
</form>

¿Cómo uso jQuery para capturar cualquier evento de verificación que ocurra myformy decir qué casilla de verificación se activó (y saber si se activó o desactivó)?

$('#myform :checkbox').change(function() {
    // this will contain a reference to the checkbox   
    if (this.checked) {
        // the checkbox is now checked 
    } else {
        // the checkbox is now no longer checked
    }
});

Use el evento de cambio.

$('#myform :checkbox').change(function() {
    // this represents the checkbox that was checked
    // do something with it
});

Hay varias respuestas útiles, pero ninguna parece cubrir todas las últimas opciones. Con ese fin, todos mis ejemplos también atienden la presencia de labelelementos coincidentes y también le permiten agregar dinámicamente casillas de verificación y ver los resultados en un panel lateral (redirigiendo console.log).

• Escuchar clickeventos nocheckboxes es una buena idea, ya que eso no permitirá alternar el teclado ni los cambios realizados cuando se hizo clic en un elemento coincidente . Siempre escucha el evento.labelchange

• Utilice el :checkboxpseudo-selector jQuery , en lugar de input[type=checkbox]. :checkboxEs más corto y más legible.

• Úselo is()con el :checkedpseudo-selector jQuery para comprobar si una casilla de verificación está marcada. Esto está garantizado para funcionar en todos los navegadores.

Controlador de eventos básico adjunto a elementos existentes:

$('#myform :checkbox').change(function () {
    if ($(this).is(':checked')) {
        console.log($(this).val() + ' is now checked');
    } else {
        console.log($(this).val() + ' is now unchecked');
    }
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/2/

Notas:

• Utiliza el :checkboxselector, que es preferible a usarinput[type=checkbox]
• Esto se conecta solo a elementos coincidentes que existen en el momento en que se registró el evento.

Controlador de eventos delegado adjunto al elemento ancestro:

Los controladores de eventos delegados están diseñados para situaciones en las que los elementos aún no existen (cargados o creados dinámicamente) y es muy útil. Se delegan la responsabilidad de un elemento ancestro (de ahí el término).

$('#myform').on('change', ':checkbox', function () {
    if ($(this).is(':checked')) {
        console.log($(this).val() + ' is now checked');
    } else {
        console.log($(this).val() + ' is now unchecked');
    }
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/4/

Notas:

• Esto funciona escuchando los eventos (en este caso change) que se propagan a un elemento ancestro que no cambia (en este caso #myform).
• Es entonces se aplica el selector de jQuery ( ':checkbox'en este caso) a sólo los elementos de la cadena de burbuja .
• Es entonces se aplica la función de controlador de eventos a sólo aquellos elementos coincidentes que ocasionaron el evento.
• Use documentcomo predeterminado para conectar el controlador de eventos delegado, si nada más está más cerca / conveniente.
• No lo use bodypara adjuntar eventos delegados, ya que tiene un error (relacionado con el estilo) que puede evitar que reciba eventos del mouse.

El resultado de los controladores delegados es que los elementos coincidentes solo deben existir en el momento del evento y no cuando el controlador de eventos se registró. Esto permite contenido agregado dinámicamente para generar los eventos.

P: ¿Es más lento?

R: Mientras los eventos estén a velocidades de interacción del usuario, no necesita preocuparse por la insignificante diferencia de velocidad entre un controlador de eventos delegado y un controlador conectado directamente. Los beneficios de la delegación superan con creces cualquier inconveniente menor. Los controladores de eventos delegados son en realidad más rápidos para registrarse, ya que generalmente se conectan a un único elemento coincidente.

¿Por qué no prop('checked', true)dispara el changeevento?

Esto es en realidad por diseño. Si desencadenara el evento, fácilmente se encontraría en una situación de actualizaciones interminables. En cambio, después de cambiar la propiedad marcada, envíe un evento de cambio al mismo elemento usando trigger(no triggerHandler):

por ejemplo, sin triggerque ocurra ningún evento

$cb.prop('checked', !$cb.prop('checked'));

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/5/

por ejemplo, con triggerel evento de cambio normal se detecta

$cb.prop('checked', !$cb.prop('checked')).trigger('change');

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/6/

Notas:

• No lo use triggerHandlercomo lo sugirió un usuario, ya que no burbujeará eventos a un controlador de eventos delegado .

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/8/

aunque será trabajar para un controlador de eventos directamente conectada al elemento:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/9/

Los eventos activados con .triggerHandler () no hacen burbujear la jerarquía DOM; si el elemento objetivo no los maneja directamente, no hacen nada.

Referencia: http://api.jquery.com/triggerhandler/

Si alguien tiene características adicionales que considera que no están cubiertas por esto, sugiera adiciones .

Usando el nuevo método 'on' en jQuery (1.7): http://api.jquery.com/on/

    $('#myform').on('change', 'input[type=checkbox]', function(e) {
        console.log(this.name+' '+this.value+' '+this.checked);

    });

• el controlador de eventos vivirá
• capturará si la casilla de verificación fue cambiada por el teclado, no solo haga clic

$('#myform input:checkbox').click(
 function(e){
   alert($(this).is(':checked'))
 }
)

Reconociendo el hecho de que el autor de la pregunta solicitó específicamente jQuery y que la respuesta seleccionada es correcta, debe tenerse en cuenta que este problema en realidad no necesita jQuery por palabra. Si uno desea resolver este problema sin él, simplemente puede establecer el onClickatributo de las casillas de verificación a las que desea agregar funcionalidad adicional, de esta manera:

HTML:

<form id="myform">
  <input type="checkbox" name="check1" value="check1" onClick="cbChanged(this);">
  <input type="checkbox" name="check2" value="check2" onClick="cbChanged(this);">
</form>

javascript:

function cbChanged(checkboxElem) {
  if (checkboxElem.checked) {
    // Do something special
  } else {
    // Do something else
  }
}

Violín: http://jsfiddle.net/Y9f66/1/

He probado el código desde la primera respuesta, no funciona, pero he jugado y esto funciona para mí

$('#vip').change(function(){
    if ($(this).is(':checked')) {
        alert('checked');
    } else {
        alert('uncheck');
    }
});