JQuery evento de alternância é brincar com valor checkbox

votos
41

Eu estou usando o evento de alternância de jQuery para fazer algumas coisas quando um usuário clica em uma caixa de seleção, como este:

$('input#myId').toggle(
function(){
//do stuff  
},
function(){
//do other stuff    
}
);

O problema é que a caixa de seleção não está a ser assinalada quando eu clicar sobre a caixa de seleção. (Todas as coisas que eu coloquei para o evento de alternância está funcionando corretamente.)

Eu tentei o seguinte:

$('input#myId').attr('checked', 'checked');

e

$(this).attr('checked', 'checked');

e até mesmo simplesmente

return true;

Mas nada está funcionando. Alguém pode me dizer onde estou indo errado?

Edit - Obrigado a todos que responderam. resposta Dreas' quase funcionou para mim, exceto a parte que verificou o atributo. Isso funciona perfeitamente (embora seja um pouco hacky)

$('input#myInput').change(function ()
{
    if(!$(this).hasClass(checked))
    {
        //do stuff if the checkbox isn't checked
        $(this).addClass(checked);
        return;
    }

    //do stuff if the checkbox isn't checked
    $(this).removeClass('checked');
});

Mais uma vez obrigado a todos os que responderam.

Publicado 10/12/2008 em 11:34
fonte usuário
Em outras línguas...                            


10 respostas

votos
52

Use o changeevento em vez do toggleevento, como tal:

$('input#myId').change(function () {
    if ($(this).attr("checked")) {
        //do the stuff that you would do when 'checked'

        return;
    }
    //Here do the stuff you want to do when 'unchecked'
});
Respondeu 10/12/2008 em 11:51
fonte usuário

votos
18

Enquanto estiver usando o changemanipulador de eventos sugerido por Dreas Grech é apropriado, ele não funciona bem no IE 6 e 7, que não dispara o changeevento até que o foco está desfocada (isto é, até que você clique fora da área da caixa de seleção) . Como QuirksMode dizer, "é um erro sério".

Você pode querer usar o clickmanipulador de eventos, mas que não vai trabalhar com navegação pelo teclado. Você precisa registrar um keyupmanipulador também ...

Veja também esta questão relacionada .

Eu ainda não encontrei uma boa solução cross-browser que suporta ambos os cliques de mouse e teclado activação das caixas de seleção (e não dispara muitos eventos).


Quanto à sua solução para verificar se a caixa está marcada ou não, em vez de adicionar sua própria checkedclasse, você pode usar o HTML checkedatributo:

$('input#myInput').change(function () {
    if ($(this).attr("checked")) {
        //do stuff if the checkbox is checked
    } else {
        //do stuff if the checkbox isn't checked
    }
});

Qualquer navegador define o checkedatributo de um inputelemento para o valor "checked"se a opção for assinalada, e define-a null(ou exclui o atributo), se a caixa de seleção não está marcada.

Respondeu 10/01/2009 em 20:40
fonte usuário

votos
8

por que não usando $ .is ()?

$('input#myId').change(
    function() {
        if ($(this).is(':checked')) {
            // do stuff here 
        } else {
            // do other stuff here
        }
});
Respondeu 07/10/2010 em 11:48
fonte usuário

votos
2

Esta é uma resposta por MorningZ (eu achei aqui ) que faz totalmente sentido:

A parte que está faltando é que "checkbox" é um objeto jQuery, não um objeto DOM checkbox

assim:

checkbox.checkedcerteza seria erro porque não há nenhuma .checkedpropriedade de um objeto jQuery

assim:

checkbox[0].checked iria trabalhar desde o primeiro item em uma matriz jQuery é o próprio objeto DOM.

Assim, em sua change()função, você pode usar

$(this)[0].checked
Respondeu 01/12/2009 em 23:04
fonte usuário

votos
1

Isso funcionou para mim ............ verificá-lo

$(":checkbox").click(function(){
if($(this).attr("id").split("chk_all")[1])
 {
  var ty  = "sel"+$(this).attr("id").split("chk_all")[1]+"[]";
  if($(this).attr("checked"))
   {
    $('input[name="'+ty+'"]').attr("checked", "checked");
   }
  else
   {
    $('input[name="'+ty+'"]').removeAttr("checked");
   }
 }
})
Respondeu 13/04/2010 em 07:30
fonte usuário

votos
1
$('input#myId').toggle(
  function(e){
    e.preventDefault();
    //do stuff      
    $(this).attr('checked', 'true');
  },
  function(e){
    e.preventDefault();
    //do other stuff        
    $(this).attr('checked', 'false');
  }
);
Respondeu 10/12/2008 em 11:55
fonte usuário

votos
0
    $("input[type=checkbox][checked=false]")// be shure to set to false on ready
    $("input#Checkbox1").change(function() {
        if ($(this).attr("checked")) {
            $("#chk1").html("you just selected me")//the lable
        } else {$("#chk1").html("you just un selected me") }    
    });
Respondeu 03/12/2010 em 02:10
fonte usuário

votos
0

Experimentar:

$(":checkbox").click(function(){
  if($(this).attr("checked"))
   {
    $('input[name="name[]"]').attr("checked", "checked");
   }
  else
   {
    $('input[name="name[]"]').removeAttr("checked");
   }
})
Respondeu 13/04/2010 em 08:04
fonte usuário

votos
0

Tente usar uma função não-jQuery:

function chkboxToggle() {
  if ($('input#chkbox').attr('checked'))
    // do something
  else
    // do something else
}

em seguida, em sua forma:

<input id="chkbox" type="checkbox" onclick="chkboxToggle()" />
Respondeu 25/08/2009 em 04:41
fonte usuário

votos
0

Eu fiz uma abordagem semelhante, mas simplesmente usando o atributo marcada como

 //toggles checkbox on/off
    $("input:checkbox").change(
        function(){
           if(!this.checked){
             this.checked=true;
           }
           else{
             this.checked=false;
           }
         }
       );
 //end toggle
Respondeu 29/04/2009 em 13:54
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more