jQuery checkbox estado alterado evento verificado

Desejo que um evento seja acionado pelo cliente quando uma checkbox de seleção estiver marcada / desmarcada:

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

Basicamente eu quero que isso aconteça para cada checkbox de seleção na página. É este método de disparo no clique e verificação do estado ok?

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

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

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

A principal vantagem de vincular o evento de change evento de click é que nem todos os cliques em uma checkbox de seleção farão com que ele mude de estado. Se você deseja apenas capturar events que fazem com que a checkbox de seleção mude de estado, você deseja o evento de change nome apropriado. Redigido nos comentários

Observe também que usei this.checked vez de envolver o elemento em um object jQuery e usar methods jQuery, simplesmente porque é mais curto e mais rápido acessar diretamente a propriedade do elemento DOM.

Editar (ver comentários)

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

 $(":checkbox") 

Ou você pode usar um atributo igual a seletor:

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

Para referência futura a qualquer um que tenha dificuldades, se você estiver adicionando as checkboxs de seleção dinamicamente, a resposta correta acima não funcionará. Você precisará aproveitar a delegação de events que permite que um nó pai capture events borbulhados de um descendente específico e emita um retorno de chamada.

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

Note que é quase sempre desnecessário usar um document para o seletor pai. 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 events dos nós dom adicionados dinamicamente não acionam os 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('

Title ' + title + '

'); } setTimeout(generateRandomArticle.bind(null, ++title), 1000); setTimeout(generateRandomArticle.bind(null, ++title), 5000); setTimeout(generateRandomArticle.bind(null, ++title), 10000);
  

Title 1

Title 2

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 } }) 

Se a sua intenção é append o evento apenas nas checkboxs de seleção marcadas (para que ele seja triggersdo quando forem desmarcadas e verificadas novamente mais tarde), então é isso que você deseja.

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

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

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

se você quiser que ele seja triggersdo apenas quando eles estiverem sendo verificados (a partir de não verificados), então @James Allardice responda acima.

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

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

talvez isso possa ser uma alternativa para você.

 ` 

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

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

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

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

Tente esta validação do jQuery

 $(document).ready(function() { $('#myform').validate({ // initialize the plugin rules: { agree: { required: true } }, submitHandler: function(form) { alert('valid form submitted'); return false; } }); });