Captura el evento de cambio verificado de una casilla de verificación


125

¿Cómo puedo detectar el evento de verificación / desmarcación <input type="checkbox" />con jQuery?


1
Si está utilizando una versión relativamente nueva de JQuery, usaría el .on ('change', function () {...}) como se menciona en la respuesta de @Daniel De Leon a continuación. Una ventaja, el detector de eventos "on" se unirá a html generado dinámicamente.
BLang

Respuestas:


172
<input type="checkbox" id="something" />

$("#something").click( function(){
   if( $(this).is(':checked') ) alert("checked");
});

Editar: hacer esto no se detectará cuando la casilla de verificación cambie por otros motivos que no sean un clic, como usar el teclado. Para evitar este problema, escuche en changelugar de click.

Para marcar / desmarcar programáticamente, eche un vistazo a ¿Por qué no se activa mi evento de cambio de casilla de verificación?


document.getElementById ('algo'). verificado funciona, ¿por qué $ ('# algo'). verificado no funciona?
omg

A su código le falta un paran, y realmente debería usar la forma jQuery para obtener el estado de verificación.
Pete Michaud

2
Shore: la razón por la que getElementById funciona es que devuelve un elemento DOM, mientras que la función $ jQuery devuelve un objeto jQuery. El objeto jQuery tiene el elemento DOM como una propiedad, pero no es, en sí mismo, un objeto DOM.
Pete Michaud

3
Sé que llego tarde a la fiesta, pero esto solo funciona cuando un evento de "clic" desencadena esto. Si por alguna razón hiciera algo como esto en otra parte del código: $ ("# something"). Attr ("verificado", "verificado") el evento click nunca se activaría.
David Stinemetze

3
@DavidStinemetze: Diría que puedes escuchar toneladas en changelugar de hacer clic. Estoy actualizando la respuesta
marcgg

44

¿El clic afectará a una etiqueta si tenemos una adjunta a la casilla de entrada?

Creo que es mejor usar la función .change ()

<input type="checkbox" id="something" />

$("#something").change( function(){
  alert("state changed");
});

1
Esta debería ser la respuesta aceptada, ya que la pregunta se trata de escuchar un evento de verificación, no un evento de clic.
Jessica

26

Utilice el selector : marcado para determinar el estado de la casilla de verificación:

$('input[type=checkbox]').click(function() {
    if($(this).is(':checked')) {
        ...
    } else {
        ...
    }
});


4

Use el fragmento de código a continuación para lograr esto .:

$('#checkAll').click(function(){
  $("#checkboxes input").attr('checked','checked');
});

$('#UncheckAll').click(function(){
  $("#checkboxes input").attr('checked',false);
});

O puede hacer lo mismo con la casilla de verificación única:

$('#checkAll').click(function(e) {
  if($('#checkAll').attr('checked') == 'checked') {
    $("#checkboxes input").attr('checked','checked');
    $('#checkAll').val('off');
  } else {
    $("#checkboxes input").attr('checked', false);
    $('#checkAll').val('on'); 
  }
});

Para demostración: http://jsfiddle.net/creativegala/hTtxe/


3

En mi experiencia, he tenido que aprovechar el objetivo actual del evento:

$("#dingus").click( function (event) {
   if ($(event.currentTarget).is(':checked')) {
     //checkbox is checked
   }
});

3

Este código hace lo que necesita:

<input type="checkbox" id="check" >check it</input>

$("#check").change( function(){
   if( $(this).is(':checked') ) {
        alert("checked");
    }else{
        alert("unchecked");
   }
});

Además, puedes consultarlo en jsfiddle


2

use el evento click para una mejor compatibilidad con MSIE

$(document).ready(function() {
    $("input[type=checkbox]").click(function() {
        alert("state changed");
    });
});

¿Cómo juzgar si está marcado o no?
omg

Necesito saber si un clic significa marcarlo o desmarcarlo.
omg

1
luego puede usar $ (this) .is (': marcado') para probar el estado del elemento que acaba de hacer clic
Ty W

-1
$(document).ready(function(){
    checkUncheckAll("#select_all","[name='check_boxes[]']");
});

var NUM_BOXES = 10;
// last checkbox the user clicked
var last = -1;
function check(event) {
  // in IE, the event object is a property of the window object
  // in Mozilla, event object is passed to event handlers as a parameter
  event = event || window.event;

  var num = parseInt(/box\[(\d+)\]/.exec(this.name)[1]);
  if (event.shiftKey && last != -1) {
    var di = num > last ? 1 : -1;
    for (var i = last; i != num; i += di)
      document.forms.boxes['box[' + i + ']'].checked = true;
  }
  last = num;
}
function init() {
  for (var i = 0; i < NUM_BOXES; i++)
    document.forms.boxes['box[' + i + ']'].onclick = check;
}

HTML:

<body onload="init()">
  <form name="boxes">
    <input name="box[0]" type="checkbox">
    <input name="box[1]" type="checkbox">
    <input name="box[2]" type="checkbox">
    <input name="box[3]" type="checkbox">
    <input name="box[4]" type="checkbox">
    <input name="box[5]" type="checkbox">
    <input name="box[6]" type="checkbox">
    <input name="box[7]" type="checkbox">
    <input name="box[8]" type="checkbox">
    <input name="box[9]" type="checkbox">
  </form>
</body>

15
Hola amigo, ¿qué haces aquí?
omg

Parece una selección de rango (es decir, verifique el primer elemento, mantenga presionada la tecla shift, verifique el último; y todos los intermedios están marcados). Sin embargo, esto es mucho más de lo que pide la pregunta. Sin embargo, falta algún código, como checkUncheckAll ().
joelsand
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.