Evento alterado na caixa de seleção jQuery

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?

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']")

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>

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 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.

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

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

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" />`

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

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>

É 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!