value - select checked jquery




manipulação de eventos da caixa de seleção jQuery (5)

Eu tentei o código da primeira resposta, não está funcionando, mas eu tenho que brincar e esse trabalho para mim

$('#vip').change(function(){
    if ($(this).is(':checked')) {
        alert('checked');
    } else {
        alert('uncheck');
    }
});

Eu tenho o seguinte:

<form id="myform">
   <input type="checkbox" name="check1" value="check1">
   <input type="checkbox" name="check2" value="check2">
</form>

Como eu uso o jQuery para capturar qualquer evento de verificação que myform no myform e dizer qual caixa de seleção foi ativada (e sei se foi ativada ou desativada)?


Existem várias respostas úteis, mas nenhuma parece cobrir todas as opções mais recentes . Para isso, todos os meus exemplos também atendem à presença de elementos de label correspondentes e também permitem adicionar dinamicamente caixas de seleção e ver os resultados em um painel lateral (redirecionando console.log ).

  • Ouvir eventos de click em checkboxes de checkboxes não é uma boa ideia, pois isso não permitirá a alternância de teclas ou alterações feitas quando um elemento de label correspondente foi clicado. Sempre ouça o evento de change .

  • Use o pseudo-seletor da :checkbox jQuery:, em vez de input[type=checkbox] . :checkbox é mais curta e mais legível.

  • Use is() com o pseudo-seletor jQuery :checked para testar se uma caixa de seleção está marcada. Isso é garantido para funcionar em todos os navegadores.

Manipulador de eventos básico anexado 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:

  • Usa o :checkbox seletor de :checkbox seleção, que é preferível ao uso de input[type=checkbox]
  • Isso se conecta apenas aos elementos correspondentes que existem no momento em que o evento foi registrado.

Manipulador de eventos delegado anexado ao elemento ancestral:

Os manipuladores de eventos delegados são projetados para situações em que os elementos podem ainda não existir (carregados ou criados dinamicamente) e são muito úteis. Eles delegam responsabilidade a um elemento ancestral (daí o termo).

$('#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:

  • Isso funciona ouvindo os eventos (nesse caso, a change ) para fazer o bubble up de um elemento ancestral que não muda (neste caso # #myform ).
  • Em seguida, ele aplica o seletor jQuery ( ':checkbox' neste caso) apenas aos elementos da cadeia de bolhas .
  • Em seguida, aplica a função de manipulador de eventos apenas aos elementos correspondentes que causaram o evento.
  • Use o document como o padrão para conectar o manipulador de eventos delegado, se nada mais estiver próximo / conveniente.
  • Não use o body para anexar eventos delegados, pois ele tem um bug (que faz com o estilo) que pode impedir a obtenção de eventos do mouse.

O resultado de manipuladores delegados é que os elementos correspondentes só precisam existir no momento do evento e não quando o manipulador de eventos foi registrado. Isso permite que conteúdo adicionado dinamicamente gere os eventos.

Q: É mais lento?

R: Desde que os eventos estejam nas velocidades de interação do usuário, você não precisa se preocupar com a diferença insignificante de velocidade entre um manipulador de eventos delegados e um manipulador conectado diretamente. Os benefícios da delegação superam de longe qualquer pequena desvantagem. Os manipuladores de eventos delegados são, na verdade, mais rápidos para registrar, já que normalmente se conectam a um único elemento correspondente.

Por que o prop('checked', true) dispara o evento de change ?

Isso é realmente por design. Se ele disparasse o evento, você facilmente entraria em uma situação de atualizações sem fim. Em vez disso, depois de alterar a propriedade verificada, envie um evento de mudança para o mesmo elemento usando o trigger (não o triggerHandler ):

por exemplo sem trigger nenhum evento ocorre

$cb.prop('checked', !$cb.prop('checked'));

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/5/

por exemplo, com trigger o evento de mudança normal é capturado

$cb.prop('checked', !$cb.prop('checked')).trigger('change');

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/6/

Notas:

  • Não use o triggerHandler como foi sugerido por um usuário, pois ele não enviará eventos para um manipulador de eventos delegado .

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/8/

embora funcione para um manipulador de eventos diretamente conectado ao elemento:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/9/

Os eventos disparados com .triggerHandler () não formam a hierarquia DOM; se eles não forem manipulados diretamente pelo elemento de destino, eles não farão nada.

Referência: http://api.jquery.com/triggerhandler/

Se alguém tiver recursos adicionais que eles acham que não estão cobertos por isso, sugira adições .


Usando o novo método 'on' no jQuery (1.7): http://api.jquery.com/on/

    $('#myform').on('change', 'input[type=checkbox]', function(e) {
        console.log(this.name+' '+this.value+' '+this.checked);

    });
  • o manipulador de eventos vai viver
  • irá capturar se a caixa de seleção foi alterada pelo teclado, não apenas clicar

Use o evento de mudança.

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

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






checkbox