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?

jquery unchecked

— Dios mio
fuente

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

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?

— marcgg
fuente

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");
});

— Dídac Rios
fuente

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

— karim79
fuente

13

Para usar JQuery 1.7+:

$('input[type=checkbox]').on('change', function() {
  ...
});

— Daniel De León
fuente

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/

— Arun Kumar
fuente

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

— Brandon Aaskov
fuente

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

— Deepak saini
fuente

2

use el evento click para una mejor compatibilidad con MSIE

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

— Ty W
fuente

¿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>

— santosh
fuente

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