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

629

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?

AnonyMouse
fuente
¿Hay alguna necesidad de hacer esta pregunta nuevamente, donde existe una pregunta muy votada en stackoverflow ... stackoverflow.com/questions/901712/…
Ariful Islam
28
@Arif No creo que sean duplicados porque la pregunta vinculada se trata de obtener el estado de una casilla de verificación, mientras que esta se trata de un evento marcado.
Rachel
1
Siempre tengo que buscar esta propiedad marcada, hay muchas maneras de lograr esto como está escrito aquí
usuario3199690

Respuestas:

1230

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']")
James Allardice
fuente
1
En realidad lo tengo buscando la casilla de verificación de la clase. ¿Hay una mejor manera de obtener todas las casillas de verificación independientemente de la clase?
AnonyMouse
44
@AnonyMouse: mira mi edición. Hay un par de maneras de hacerlo.
James Allardice
18
@Vigrond: en realidad, al hacer clic en una etiqueta se activa el evento de clic en el control asociado: jsfiddle.net/ZFG84
James Allardice
44
Esto es mucho más limpio que $(this).is(':checked'). Pensé que tenía que usar el changeevento si desea detectar cambios desde el teclado (tabulación, presionar espacio), pero sorprendentemente, clicktambién detecta cambios que no son de un clic del mouse, no estoy seguro de si es una cosa de jQuery, jsfiddle.net / mendesjuan / E39sz
Juan Mendes
41
Por favor nota: Encuadernación cualquier caso click, changeo lo que sea que todas las casillas de la página puede causar problemas de rendimiento (depepending de la cantidad de casillas de verificación). Intente vincular al elemento principal o al documento y capturar el evento burbujeado, es decir$('form').on('change', ':checkbox', function(){ //stuff });
hitautodestruct el
109

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>

trituradora de manzanas
fuente
23

Solo otra solucion

$('.checkbox_class').on('change', function(){ // on change of state
   if(this.checked) // if changed state is "CHECKED"
    {
        // do the magic here
    }
})
Siddhartha Chowdhury
fuente
44
Si bien este código puede responder la pregunta, proporcionar un contexto adicional con respecto a por qué y / o cómo responde la pregunta mejora su valor a largo plazo.
JAL
12

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.

Matas Vaitkevicius
fuente
¿Qué sucede si desea encontrar solo casillas de verificación no marcadas? Tengo esto para todos los comprobados $ ("# tableUSNW tbody tr td [id = td1]: casilla de verificación: marcado"); pero no sé cómo encontrar todos los que no están marcados.
FrenkyB
1
@FrenkyB intente lo siguiente:$("input[type='checkbox']:not(:checked)")
Matas Vaitkevicius
5
$(document).ready(function () {
    $(document).on('change', 'input[Id="chkproperty"]', function (e) {
        alert($(this).val());
    });
});
Burhan Kaya
fuente
3

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();
}
Hasib Kamal
fuente
el evento 'clic' no funciona en este caso. en 'cambio' funciona.
Mehmood Memon
2

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" />`
caras
fuente
2

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

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>

Nɪsʜᴀɴᴛʜ ॐ
fuente
1

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!

Radames E. Hernandez
fuente