Evento alterado na caixa de seleção jQuery


629

Quero que um evento seja acionado do lado do cliente quando uma caixa de seleção estiver marcada / desmarcada:

$('.checkbox').click(function() {
  if ($(this).is(':checked')) {
    // Do stuff
  }
});

Basicamente, quero que isso aconteça em todas as caixas de seleção da página. Esse método de acionar o clique e verificar o estado está ok?

Eu estou pensando que deve haver uma maneira jQuery mais limpa. Alguém conhece uma solução?


existe alguma necessidade de fazer essa pergunta novamente, onde existe uma mesma pergunta votada muito no stackoverflow .... stackoverflow.com/questions/901712/…
Ariful Islam

28
@ Arif Eu não acho que eles sejam duplicados porque a questão vinculada é sobre obter o estado de uma caixa de seleção, enquanto esta é sobre um evento marcado.
22412 Rachel

1
Eu sempre tenho que procurar por essa propriedade marcada, há muitas maneiras de conseguir isso, como está escrito aqui
user3199690

Respostas:


1229

Vincule ao changeevento em vez de click. No entanto, você provavelmente ainda precisará verificar se a caixa de seleção está marcada ou não:

$(".checkbox").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

O principal benefício da ligação ao changeevento sobre o clickevento é que nem todos os cliques em uma caixa de seleção farão com que ele mude de estado. Se você deseja capturar apenas eventos que fazem com que a caixa de seleção mude de estado, deseja o changeevento com o nome apropriado . Editado em comentários

Observe também que eu usei, em this.checkedvez de agrupar o elemento em um objeto jQuery e usar métodos jQuery, simplesmente porque é mais curto e rápido acessar a propriedade do elemento DOM diretamente.

Editar (ver comentários)

Para obter todas as caixas de seleção, você tem algumas opções. Você pode usar o :checkboxpseudo-seletor:

$(":checkbox")

Ou você pode usar um atributo igual ao seletor:

$("input[type='checkbox']")

1
Na verdade, eu procurei pela caixa de seleção da turma. Existe uma maneira melhor de obter todas as caixas de seleção, independentemente da classe?
AnonyMouse

4
@AnonyMouse - Veja minha edição. Existem algumas maneiras de fazer isso.
James Allardice

18
@Vigrond - Na verdade, clicar em um rótulo aciona o evento click no controle associado: jsfiddle.net/ZFG84
James Allardice

4
Isso é muito mais limpo que $(this).is(':checked'). Eu pensei que você tinha que usar o changeevento para detectar alterações no teclado (tabulação, espaço), mas, surpreendentemente, clicktambém detecta alterações que não são obtidas com um clique do mouse, não tenho certeza se é algo do jQuery, jsfiddle.net / mendesjuan / E39sz
Juan Mendes

41
Por favor nota: Encadernação qualquer evento click, changeou qualquer que seja a todas as caixas de seleção na página podem causar problemas de desempenho (depepending sobre a quantidade de caixas de seleção). Tente ligação ao elemento pai ou o documento e capturando a ie evento borbulhava$('form').on('change', ':checkbox', function(){ //stuff });
hitautodestruct

109

Para referência futura a qualquer pessoa aqui com dificuldade, se você estiver adicionando as caixas de seleção dinamicamente, a resposta correta aceita acima não funcionará. Você precisará aproveitar a delegação de eventos, que permite que um nó pai capture eventos com bolhas de um descendente específico e emita um retorno de chamada.

// $(<parent>).on('<event>', '<child>', callback);
$(document).on('change', '.checkbox', function() {
    if(this.checked) {
      // checkbox is checked
    }
});

Observe que quase sempre é desnecessário usar documento seletor principal. Em vez disso, escolha um nó pai mais específico para impedir a propagação do evento em muitos níveis.

O exemplo abaixo mostra como os eventos de nós de domínio adicionados dinamicamente não acionam ouvintes definidos anteriormente.

$postList = $('#post-list');

$postList.find('h1').on('click', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000);
setTimeout(generateRandomArticle.bind(null, ++title), 5000);
setTimeout(generateRandomArticle.bind(null, ++title), 10000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

Enquanto este exemplo exibe o uso da delegação de eventos para capturar eventos para um nó específico ( h1neste caso) e emitir um retorno de chamada para esses eventos.

$postList = $('#post-list');

$postList.on('click', 'h1', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000); setTimeout(generateRandomArticle.bind(null, ++title), 5000); setTimeout(generateRandomArticle.bind(null, ++title), 10000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>


23

Apenas outra solução

$('.checkbox_class').on('change', function(){ // on change of state
   if(this.checked) // if changed state is "CHECKED"
    {
        // do the magic here
    }
})

4
Embora esse código possa responder à pergunta, fornecer um contexto adicional a respeito de por que e / ou como esse código responde à pergunta melhora seu valor a longo prazo.
JAL

12

Se sua intenção é anexar um evento apenas às caixas de seleção marcadas (para que seja acionado quando elas forem desmarcadas e marcadas mais tarde novamente), é isso que você deseja.

$(function() {
    $("input[type='checkbox']:checked").change(function() {

    })
})

se sua intenção é anexar evento a todas as caixas de seleção (marcadas e desmarcadas)

$(function() {
    $("input[type='checkbox']").change(function() {

    })
})

se você deseja que ele seja acionado somente quando eles estão sendo verificados (de não marcado), @James Allardice responde acima.

BTW input[type='checkbox']:checkedé um seletor de CSS.


E se você quiser encontrar apenas caixas de seleção não marcadas? Eu tenho isso para todos verificados $ ("# tableUSNW tbody tr td [id = td1]: caixa de seleção: marcada"); mas não sei como encontrar todos os itens não marcados.
FrenkyB

1
@FrenkyB tente o seguinte:$("input[type='checkbox']:not(:checked)")
Matas Vaitkevicius

5
$(document).ready(function () {
    $(document).on('change', 'input[Id="chkproperty"]', function (e) {
        alert($(this).val());
    });
});

3

Ação tomada com base em um evento (no evento clique).

$('#my_checkbox').on('click',function(){
   $('#my_div').hide();
   if(this.checked){
     $('#my_div').show();
   }
});

Sem evento executando ação com base no estado atual.

$('#my_div').hide();
if($('#my_checkbox').is(':checked')){
  $('#my_div').show();
}

no evento 'clique' não funciona neste caso. em 'mudar' funciona.
Mehmood Memon

2

talvez isso possa ser uma alternativa para você.

<input name="chkproperty" onchange="($(this).prop('checked') ? $(this).val(true) : $(this).val(false))" type="checkbox" value="true" />`

2

Esta é a solução a encontrar, se a caixa de seleção está marcada ou não. Use a função #prop () //

$("#c_checkbox").on('change', function () {
                    if ($(this).prop('checked')) {
                        // do stuff//
                    }
                });

1

Experimente esta validação jQuery

$(document).ready(function() {
  $('#myform').validate({ // initialize the plugin
    rules: {
      agree: {
        required: true
      }

    },
    submitHandler: function(form) {
      alert('valid form submitted');
      return false;
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>

<form id="myform" action="" method="post">
  <div class="buttons">
    <div class="pull-right">
      <input type="checkbox" name="agree" /><br/>
      <label>I have read and agree to the <a href="https://stackexchange.com/legal/terms-of-service">Terms of services</a> </label>
    </div>
  </div>
  <button type="submit">Agree</button>
</form>


1

É muito simples, é assim que eu uso:

JQuery:

$(document).on('change', '[name="nameOfCheckboxes[]"]', function() {
    var checkbox = $(this), // Selected or current checkbox
        value = checkbox.val(); // Value of checkbox

    if (checkbox.is(':checked'))
    {
        console.log('checked');
    }else
    {
        console.log('not checked');
    }
});

Saudações!

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.