Capturar evento de alteração marcado de uma caixa de seleção

125

Como faço para pegar o evento de marcar / desmarcar <input type="checkbox" />com o jQuery?

jquery unchecked AMD
fonte
1
Se você estiver usando uma versão relativamente nova do JQuery, usaria o .on ('change', function () {...}) conforme mencionado na resposta de @Daniel De Leon abaixo. Uma vantagem: o ouvinte de evento "on" será vinculado ao html gerado dinamicamente.
Blang

Respostas:

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

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

Editar: isso não será capturado quando a caixa de seleção for alterada por outros motivos que não um clique, como usar o teclado. Para evitar esse problema, ouça em changevez de click.

Para marcar / desmarcar programaticamente, dê uma olhada em Por que meu evento de alteração da caixa de seleção não é acionado?

marcgg
fonte
document.getElementById ('something') .check funciona, por que $ ('# something') .check não funciona?
OMG
Seu código está faltando um paran e realmente deve usar a maneira jQuery de obter o estado de verificação.
Pete Michaud
2
Shore: a razão pela qual getElementById funciona é que ele retorna um elemento DOM, enquanto a função $ jQuery retorna um objeto jQuery. O objeto jQuery possui o elemento DOM como uma propriedade, mas não é, por si só, um objeto DOM.
Pete Michaud
3
Sei que estou chegando atrasado à festa, mas isso só funciona quando um evento de "clique" aciona isso. Se, por algum motivo, você fizesse algo assim em outro lugar no código: $ ("# something"). Attr ("selected", "selected"), o evento click nunca seria acionado.
David Stinemetze
3
@DavidStinemetze: Eu diria que você pode ouvir muito em changevez de clicar. Estou atualizando a resposta
marcgg 12/01
44

O clique afetará um rótulo se houver um anexado à caixa de seleção de entrada?

Eu acho que é melhor usar a função .change ()

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

$("#something").change( function(){
  alert("state changed");
});
Dídac Rios
fonte
1
Essa deve ser a resposta aceita, pois a pergunta é sobre ouvir um evento de verificação, não um evento de clique.
Jessica
26

Use o seletor : selected para determinar o estado da caixa de seleção:

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

Para o JQuery 1.7+, use:

$('input[type=checkbox]').on('change', function() {
  ...
});
Daniel De León
fonte
4

Use o snippet de código abaixo para conseguir isso:

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

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

Ou você pode fazer o mesmo com uma única caixa de seleção:

$('#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 demonstração: http://jsfiddle.net/creativegala/hTtxe/

Arun Kumar
fonte
3

Na minha experiência, tive que aproveitar o currentTarget do evento:

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

Este código faz o que você precisa:

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

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

Além disso, você pode verificá-lo no jsfiddle

Deepak saini
fonte
2

use o evento click para melhor compatibilidade com o MSIE

$(document).ready(function() {
    $("input[type=checkbox]").click(function() {
        alert("state changed");
    });
});
Ty W
fonte
Como julgar se está marcado ou não?
Omg
Preciso saber se um clique significa para marcar ou desmarcar.
Omg
1
você pode usar $ (this) .is (': selected') para testar o estado do item que acabou de ser clicado
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
fonte
15
Ei, amigo, o que você está fazendo aqui?
OMG
Parece uma seleção de intervalo (ou seja, verifique o primeiro item, mantenha pressionada a tecla Shift, verifique o último; e todos os itens marcados.) No entanto, isso é muito mais do que a pergunta solicita. Faltam alguns códigos, como checkUncheckAll ().
JoelSand #