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?


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?


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

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

13

Para o JQuery 1.7+, use:

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

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/


3

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

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

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


2

use o evento click para melhor compatibilidade com o MSIE

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

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>

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 #
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.