Casilla de verificación jQuery, estado marcado, evento cambiado

Quiero que un evento active el lado del cliente cuando una casilla de verificación está marcada / desmarcada:

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

Básicamente quiero que suceda para cada casilla de verificación en la página. ¿Este método de disparar con el clic y verificar el estado está bien?

Estoy pensando que debe haber una forma más limpia de jQuery. Alguien sabe una solución?

Enlace al changeevento en lugar de click. Sin embargo, es probable que aún deba verificar si la casilla está marcada o no:

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

El principal beneficio de vincularse al changeevento sobre el clickevento es que no todos los clics en una casilla de verificación harán que cambie de estado. Si solo desea capturar eventos que hacen que la casilla de verificación cambie de estado, desea el changeevento con el nombre adecuado. Redactado en comentarios

También tenga en cuenta que he usado en this.checkedlugar de envolver el elemento en un objeto jQuery y usar métodos jQuery, simplemente porque es más corto y más rápido acceder a la propiedad del elemento DOM directamente.

Editar (ver comentarios)

Para obtener todas las casillas de verificación, tiene un par de opciones. Puede usar el :checkboxpseudo-selector:

$(":checkbox")

O podría usar un atributo igual selector:

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

Para futuras referencias a cualquier persona que tenga dificultades, si agrega las casillas de verificación dinámicamente, la respuesta correcta aceptada anteriormente no funcionará. Deberá aprovechar la delegación de eventos que permite que un nodo principal capture eventos burbujeados de un descendiente específico y emita una devolución de llamada.

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

Tenga en cuenta que casi siempre es innecesario usarlo documentpara el selector principal. En su lugar, elija un nodo principal más específico para evitar propagar el evento a demasiados niveles.

El siguiente ejemplo muestra cómo los eventos de nodos dom añadidos dinámicamente no desencadenan oyentes definidos previamente.

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

Si bien este ejemplo muestra el uso de la delegación de eventos para capturar eventos para un nodo específico ( h1en este caso) y emitir una devolución de llamada para tales 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>

Solo otra solucion

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

Si su intención es adjuntar un evento solo en las casillas de verificación marcadas (por lo que se activaría cuando se desmarquen y se verifiquen más tarde), entonces esto es lo que desea.

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

    })
})

si su intención es adjuntar un evento a todas las casillas de verificación (marcadas y no marcadas)

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

    })
})

si desea que se active solo cuando están siendo verificados (sin marcar), entonces @James Allardice responde arriba.

Por cierto input[type='checkbox']:checkedes el selector de CSS.

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

Acción basada en un evento (evento de clic).

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

Sin evento tomando medidas basadas en el estado actual.

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

Quizás esta sea una alternativa para ti.

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

Esta es la solución para encontrar si la casilla está marcada o no. Use la función #prop () //

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

Prueba esta validación de 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>

Es muy simple, esta es la forma en que 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');
    }
});

¡Saludos!