se a caixa de seleção estiver marcada, faça isso


126

Quando eu marcar uma caixa de seleção, quero que ela gire <p> #0099ff.

Quando desmarco a caixa de seleção, quero desfazê-la.

Código que tenho até agora:

$('#checkbox').click(function(){
    if ($('#checkbox').attr('checked')) {
        /* NOT SURE WHAT TO DO HERE */
    }
}) 

1
"... quando estiver desmarcado, para desativar a mesma função." - a função passada para .click()é chamada no evento click. Portanto, não entendo o que você quer dizer com "ativar" e "desativar". Se a caixa de seleção estiver marcada, você pode chamar a função a(). Mas você deve escrever a função reversa para chamar quando a caixa de seleção não estiver marcada. Estou confuso.
jensgram

Você pode, é claro, .bind()e .unbind()eventos para outro elemento com base no estado da caixa de seleção. É isso que você procura?
jensgram

1
Desculpe por enviar spam, mas fiz um exemplo do que estou falando.
jensgram

1
Eu sei que este é um post antigo, mas agora o jQuery usa prop()para o que essa pergunta queria usar attr(); o prop()método não havia sido criado naquela época. As respostas sobre this.checkedprovavelmente ainda são úteis, no entanto.
trysis

Respostas:


235

Eu usaria .change() e this.checked:

$('#checkbox').change(function(){
    var c = this.checked ? '#f00' : '#09f';
    $('p').css('color', c);
});

-

O uso de this.checked
Andy E fez uma excelente descrição sobre como tendemos a usar o jQuery: Utilizando o incrível poder do jQuery para acessar as propriedades de um elemento . O artigo trata especificamente o uso de .attr("id"), mas no caso em que #checkbox é um <input type="checkbox" />elemento do problema é a mesma para $(...).attr('checked')(ou mesmo $(...).is(':checked')) vs this.checked.


48

Tente isso.

$('#checkbox').click(function(){
    if (this.checked) {
        $('p').css('color', '#0099ff')
    }
}) 

Às vezes, exageramos no jquery. Muitas coisas podem ser obtidas usando jquery com javascript simples.


34

Pode acontecer que "this.checked" esteja sempre "on". Portanto, eu recomendo:

$('#checkbox').change(function() {
  if ($(this).is(':checked')) {
    console.log('Checked');
  } else {
    console.log('Unchecked');
  }
});

No meu caso, eu apenas mudei para $(':checkbox'), a fim de fazê-lo funcionar;) #
Pathros

21

é melhor se você definir uma classe com uma cor diferente e mudar de classe

$('#checkbox').click(function(){
    var chk = $(this);
    $('p').toggleClass('selected', chk.attr('checked'));
}) 

dessa maneira, seu código fica mais limpo porque você não precisa especificar todas as propriedades de css (digamos que você queira adicionar uma borda, um estilo de texto ou outro ...), mas você apenas alterna uma classe


4
+1 para solução genérica. Não há motivo para fazer isso $('#checkbox').attr('checked'), no entanto, se sabemos que #checkbox é uma caixa de seleção (caso contrário, o ID é bastante enganador). this.checkedvai fazer.
jensgram

@jensgram @fcalderan +1 Obrigado pela dica! Eu nunca tinha visto toggleClass com switch. Estou excluindo minha postagem porque ela é inútil. Desculpe por ser tão exigente, mas acho que essa resposta seria 100% perfeita sem a opção '#checkbox' ser selecionada duas vezes: talvez use $ (this)? Ou a solução de jensgram?
ataque

@ ataque, é claro que você pode armazenar em cache seu elemento antes de usá-lo (veja o código agora). this.checked é ainda mais rápido do que $ (..) attr ( 'checada').

4

Eu descobri uma solução louca para lidar com esta questão da caixa de seleção não marcada ou marcada aqui é o meu algoritmo ... criar uma variável global digamos var check_holder

check_holder possui 3 estados

  1. estado indefinido
  2. 0 estado
  3. 1 estado

Se a caixa de seleção estiver selecionada,

$(document).on("click","#check",function(){
    if(typeof(check_holder)=="undefined"){
          //this means that it is the first time and the check is going to be checked
          //do something
          check_holder=1; //indicates that the is checked,it is in checked state
    }
    else if(check_holder==1){
          //do something when the check is going to be unchecked
          check_holder=0; //it means that it is not checked,it is in unchecked state
    }
     else if(check_holder==0){
            //do something when the check is going to be checked
            check_holder=1;//indicates that it is in a checked state
     }
});

O código acima pode ser usado em muitas situações para descobrir se uma caixa de seleção foi marcada ou não. O conceito por trás disso é salvar os estados da caixa de seleção em uma variável, ou seja, quando está ativada, desativada. Espero que a lógica possa ser usada para resolver seu problema.


1
A solução é realmente louca, mas não de um jeito bom. Sim, as variáveis ​​globais podem ajudá-lo a resolver um problema hoje, mas quase certamente se tornarão um problema para você amanhã. Tente evitá-los sempre que possível, que é 99% do tempo. Eles tornam impossível raciocinar sobre seu código sem se preocupar com o estado global. Uma variável global pode parecer inocente, mas rapidamente se torna dezenas e centenas. Estive lá, vi isso e não é bonito.
bijancn

3

Verifique este código:

<!-- script to check whether checkbox checked or not using prop function -->
<script>
$('#change_password').click(function(){
    if($(this).prop("checked") == true){ //can also use $(this).prop("checked") which will return a boolean.
        alert("checked");
    }
    else if($(this).prop("checked") == false){
        alert("Checkbox is unchecked.");
    }
});
</script>

1
$('#checkbox').change(function(){
   (this.checked)?$('p').css('color','#0099ff'):$('p').css('color','another_color');
});

1

Provavelmente, você pode seguir esse código para executar ações, pois a caixa de seleção está marcada ou desmarcada.

$('#chk').on('click',function(){
    if(this.checked==true){
      alert('yes');
    }else{
      alert('no');
    }
});


0

Implementação ideal

$('#checkbox').on('change', function(){
    $('p').css('color', this.checked ? '#09f' : '');
});

Demo

$('#checkbox').on('change', function(){
    $('p').css('color', this.checked ? '#09f' : '');
});
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<input id="checkbox" type="checkbox" /> 
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
    Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est
    laborum.
</p>


0

Por que não usar os eventos incorporados?

$('#checkbox').click(function(e){
    if(e.target.checked) {
     // code to run if checked
        console.log('Checked');

     } else {

     //code to run if unchecked
        console.log('Unchecked');
     }
});
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.