jQuery checkbox evento de manejo


136

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ó)?

Respuestas:


244
$('#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
    }
});

30
thisya está configurado en el elemento DOM de la casilla de verificación, por lo que this.checkedes suficiente. No necesitará crear otro objeto jQuery para él a menos que planee manipularlo.
Walf

18
Solo un pequeño consejo. Obtendrá un aumento de rendimiento al usar input: checkbox en su selector en lugar de solo: checkbox ya que este último se traduce al selector universal *: checkbox.
jimmystormig 01 de

23
Click no está cerca de ningún evento de verificación.
Peter

27
Esta no es la mejor respuesta. Si tiene una etiqueta correspondiente para su entrada (como <label for='myInput'>Checkbox:</label><input id='myInput' name='myInput' type='checkbox'/>) y hace clic en la etiqueta, se marcará la casilla de verificación, pero NO se llamará a esta función. Deberías usar el .change()evento
Patrick

77
Esta respuesta no proporciona la respuesta completa; consulte la respuesta de Anurag a continuación, que es una respuesta MUCHO más completa (y precisa). Esta respuesta es en parte correcta, por supuesto, pero como se dijo, no es la mejor respuesta.
Carnix

131

Use el evento de cambio.

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

55
Si la casilla de verificación está oculta, el usuario no podrá interactuar con ella. Avísame si querías decir algo más.
Anurag

1
Esto no dispara para $("input[name=check1]").prop('checked', true). Ver jsfiddle.net/Z3E8V/2
Peter

15
Eso es por diseño. El cambio programático de la propiedad de un elemento DOM no activa los controladores de eventos asociados. Tendrás que dispararlos manualmente.
Anurag

66
Esta debería ser la respuesta seleccionada, cubre hacer clic en la etiqueta de una casilla de verificación
Patrick

3
De la documentación de jQuery: "Debido a que :checkboxes una extensión jQuery y no forma parte de la especificación CSS, las consultas que se utilizan :checkboxno pueden aprovechar el aumento de rendimiento proporcionado por el querySelectorAll()método DOM nativo . Para un mejor rendimiento en los navegadores modernos, utilícelo [type="checkbox"]en su lugar".
NXT

54

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 .


31

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

1
Esto no dispara para $("input[name=check1]").prop('checked', true). Ver jsfiddle.net/Z3E8V/2
Peter

77
Simplemente agregue .triggerHandler('change');después de la .propllamada. Luego alternará la casilla Y llamará al evento.
Hanna

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

val()no te dice si checkedes así true.
Walf

5

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/


55
Poner controladores de eventos directamente en el HTML funciona, por supuesto. Pero está en conflicto directo con DRY y las metodologías de mejora progresiva. Una respuesta más precisa sería "No necesita jQuery para agregar controladores de eventos" y, en su lugar, usar JS estándar para adjuntar los controladores de clic en un archivo JS separado en lugar de poner atributos onclick en el HTML. Hacerlo "funciona", pero una buena práctica de codificación dicta que debes evitarlo cuando sea posible (lo cual es casi siempre en este punto, a menos que debas admitir IE6 o algo, lo que incluso MS dice que no deberías hacer más)
Carnix

3

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