jQuery, caixas de seleção e .is (“: verificado”)


88

Quando vinculo uma função a um elemento de caixa de seleção como:

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

A caixa de seleção muda seu atributo marcado antes que o evento seja disparado, este é o comportamento normal e fornece um resultado inverso.

No entanto, quando eu faço:

$("#myCheckbox").click();

A caixa de seleção altera o atributo marcado após o evento ser acionado.

Minha pergunta é: há uma maneira de acionar o evento de clique do jQuery como um clique normal faria (primeiro cenário)?

PS: Já tentei com trigger('click');


5
Acabei de verificar isso. Você está completamente correto. Isso parece como ele poderia ser um bug. Eu levantaria isso como um bug com jQuery e veria o que acontece dev.jquery.com
cletus

1
E o evento de 'mudança'?
ZippyV

@cletus Na verdade, é um bug do Jquery 1.4.2. 1.3.2 funciona muito bem.
Ben,

Estou vendo o mesmo comportamento em 1.4.2 e 1.3.2: jsfiddle.net/HCUNn
Nick Craver

@Nick Ele ainda faz o oposto do que um clique normal do mouse faria. Sinceramente, não sei por que 1.3.2 funciona para mim e 1.4.2 não, mas ainda assim, isso precisa ser mudado.
Ben,

Respostas:


97
$('#myCheckbox').change(function () {
    if ($(this).prop("checked")) {
        // checked
        return;
    }
    // not checked
});

Nota: Em versões mais antigas do jquery, era normal usar attr. Agora é sugerido usarprop para ler o estado.


1
Eu tentei isso, "$ (# myCheckbox) .click ()" desmarca / marca a caixa, mas a função de alteração nunca é acionada. Eu também tentei alterar o atributo 'verificado' em vez de chamar click () e até mesmo definir a função 'alterar' para 'ativo'.
Ben

@Ben - você tem que acioná-lo de uma maneira diferente para que isso funcione, veja minha resposta para a instrução do acionador.
Nick Craver

@ Nick Obrigado, vou aceitar a resposta tcurdt porque ele foi o primeiro a sair com a solução. Tolo eu não acionei o método de 'mudança'.
Ben,

19
e para versões mais recentes do jquery a função é prop ("verificado") em vez de attr ("verificado") no caso de pegar mais alguém.
danski

Eu evitaria 'prop' devido à não compatibilidade com versões anteriores, esp. no IE.
vapcguy

27

Existe uma solução alternativa que funciona no jQuery 1.3.2 e 1.4.2 :

$("#myCheckbox").change( function() {
    alert($(this).is(":checked"));
});

//Trigger by:
$("#myCheckbox").trigger('click').trigger('change');​​​​​​​​​​​​​

Mas eu concordo, esse comportamento parece bugado em comparação com o evento nativo.


10

Em junho de 2016 (usando jquery 2.1.4) nenhuma das outras soluções sugeridas funcionou. Verificar attr('checked')sempre retorna undefinede is('checked)sempre retorna false.

Basta usar o método prop:

$("#checkbox").change(function(e) {

  if ($(this).prop('checked')){
    console.log('checked');
  }
});

2
is('checked)retornará falso porque "verificado" não é um pseudo seletor CSS. O correto deve ser de is(':checked')forma que procure ": verificado".
dhaupin de

4

Ainda estou tendo esse comportamento com o jQuery 1.7.2. Uma solução alternativa simples é adiar a execução do manipulador de cliques com setTimeout e deixar o navegador fazer sua mágica enquanto isso:

$("#myCheckbox").click( function() {
    var that = this;
    setTimeout(function(){
        alert($(that).is(":checked"));
    });
});

Sim! Um pouco offtopic, mas tive que fazer o mesmo em grades Kendo com caixas de seleção quando alguém clicou em "Adicionar novo registro" se eu quisesse que fosse "Ativo" por padrão. Tive que dar também um tempo de 500ms. Então eu tive que adicionar .click(), definir .attr('value', 'true'), então .change(), .blur()antes de definir programaticamente a caixa quando cliquei no botão "Atualizar" programaticamente ...
vapcguy

2

Se você antecipar esse comportamento bastante indesejado, uma alternativa seria passar um parâmetro extra de jQuery.trigger () para o manipulador de cliques da caixa de seleção. Este parâmetro extra é para notificar o manipulador de cliques que o clique foi disparado programaticamente, em vez de o usuário clicar diretamente na própria caixa de seleção. O manipulador de cliques da caixa de seleção pode então inverter o status de verificação relatado.

Então, aqui está como eu acionaria o evento de clique em uma caixa de seleção com o ID "myCheckBox". Observe que também estou passando um parâmetro de objeto com um único membro, nonUI, que está definido como verdadeiro:

$("#myCheckbox").trigger('click', {nonUI : true})

E é assim que eu lido com isso no manipulador de eventos de clique da caixa de seleção. A função de manipulador verifica a presença do objeto não-UI como seu segundo parâmetro. (O primeiro parâmetro é sempre o próprio evento.) Se o parâmetro estiver presente e definido como verdadeiro, eu inverto o status .checked relatado. Se esse parâmetro não for passado - o que não acontecerá se o usuário simplesmente clicar na caixa de seleção na IU - eu relato o status real .checked:

$("#myCheckbox").click(function(e, parameters) {
   var nonUI = false;
        try {
            nonUI = parameters.nonUI;
        } catch (e) {}
        var checked = nonUI ? !this.checked : this.checked;
        alert('Checked = ' + checked);
    });

Versão JSFiddle em http://jsfiddle.net/BrownieBoy/h5mDZ/

Eu testei com Chrome, Firefox e IE 8.


2
<input id="widget-wpb_widget-3-custom_date" class="mycheck" type="checkbox" value="d/M/y" name="widget-wpb_widget[3][custom_date]" unchecked="true">    

var atrib = $('.mycheck').attr("unchecked",true);
$('.mycheck').click(function(){
if ($(this).is(":checked")) 
{
$('.mycheck').attr("unchecked",false);
   alert("checkbox checked");
}
else
{
$('.mycheck').attr("unchecked",true);
 alert("checkbox unchecked");
}
});

Alguns comentários seriam bons
Danil Gaponov

1
  $("#checkbox").change(function(e) {

  if ($(this).prop('checked')){
    console.log('checked');
  }
});

1
$("#personal").click(function() {
      if ($(this).is(":checked")) {
            alert('Personal');
        /* var validator = $("#register_france").validate(); 
        validator.resetForm(); */
      }
            }
            );

JSFIDDLE


0

Bem, para combinar com o primeiro cenário, isso é algo que eu inventei.

http://jsbin.com/uwupa/edit

Essencialmente, em vez de vincular o evento "click", você vincula o evento "change" ao alerta.

Então, quando você dispara o evento, primeiro você dispara o clique e, a seguir, a mudança.


0

Além da resposta de Nick Craver, para que isso funcione corretamente, IE 8você precisa adicionar um manipulador de cliques adicional à caixa de seleção:

// needed for IE 8 compatibility
if ($.browser.msie)
    $("#myCheckbox").click(function() { $(this).trigger('change'); });

$("#myCheckbox").change( function() {
    alert($(this).is(":checked"));
});

//Trigger by:
$("#myCheckbox").trigger('click').trigger('change');

Caso contrário, o callback só será acionado quando a caixa de seleção perder o foco, pois IE 8mantém o foco nas caixas de seleção e rádios quando clicados.

Ainda não testei IE 9.


0
$( "#checkbox" ).change(function() {
    if($(this).is(":checked")){
        alert('hi');
    }

});

1
Mencione alguns detalhes
CodeWarrior

Parece que esta é apenas uma resposta repetida, usando em changevez dos OPs click, e apenas usa uma ifinstrução como uma forma diferente de teste :checked.
vapcguy

-1

Maneira mais rápida e fácil :

$('#myCheckbox').change(function(){
    alert(this.checked);
});

$el[0].checked;

$ el - é o elemento jquery de seleção.

Aproveitar!


-2
if ($.browser.msie) {
    $("#myCheckbox").click(function() { $(this).trigger('change'); });
}

$("#myCheckbox").change(function() {
        alert($(this).is(":checked"));
    });
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.