¿Cómo activar el evento de clic en la casilla de verificación incluso si está marcado a través del código Javascript?

80

Tengo muchas casillas de verificación en mi página y hay una casilla de verificación para seleccionar todo que marca todas las casillas de verificación. De alguna manera, quiero emular ese evento de clic de la casilla de verificación incluso si está marcado / desmarcado a través del botón Seleccionar todo. ¿Cómo puedo hacerlo?

— Jishnu AP
fuente

117

Puede utilizar el .trigger()método jQuery . Ver http://api.jquery.com/trigger/

P.ej:

$('#foo').trigger('click');

— Mark Robinson
fuente

13

También puede simplemente llamar $('#foo').click(), lo que efectivamente hace lo mismo.

— Kevin Babcock

2

¿Cómo hacer esto con JavaScript puro?

— Paul

6

aparece trigger('click')alterna el valor actual. Si solo desea configurarlo, checkedconfigúrelo en verdadero, luego llame a triggerHandler (...) stackoverflow.com/questions/10268222/…

— rogerdpack

1

¿Cómo se marcan exactamente publicaciones como esta como correctas cuando requieren el uso de un tercero? No pidió una solución de jQuery.

— Wancieho

@Wancieho La pregunta está etiquetada como 'jquery'.

— Mark Robinson

15

Obtener el estado del cheque

var checked = $("#selectall").is(":checked");

Entonces para configurar

$("input:checkbox").attr("checked",checked);

— Harish
fuente

9

No probé esto con el attrque uso prophoy en día, pero este método solo marca las casillas, no

— activa

9

También puedes usar la .change()función

P.ej:

$('form input[type=checkbox]').change(function() { console.log('hello') });

— silviomoreto
fuente

Esto no funciona para mí cuando el cambio de casilla de verificación se realiza a través de Javascript.

— Flimm

6

sin gQuery

document.getElementById ('su_caja'). onclick ();

Usé cierta clase en mis casillas de verificación.

var x = document.getElementsByClassName("box_class");
var i;
for (i = 0; i < x.length; i++) {
    if(x[i].checked) x[i].checked = false;
    else x[i].checked = true;
    x[i].onclick();
   }

— Harijs Krūtainis
fuente

6

También puedes usar esto, espero que puedas servirles.

$(function(){
  $('#elements input[type="checkbox"]').prop("checked", true).trigger("change");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="elements">
  <input type="checkbox" id="item-1" value="1"> Item 1 <br />
  <input type="checkbox" id="item-2" value="2" disabled> Item 2 <br /> 
  <input type="checkbox" id="item-3" value="3" disabled> Item 3 <br />
  <input type="checkbox" id="item-4" value="4" disabled> Item 4 <br />
  <input type="checkbox" id="item-5" value="5"> Item 5
</div>

Expandir fragmento

— Aprendiendo y compartiendo
fuente

4

La función de activación de jQuery podría ser su respuesta.

jQuery docs dice: Cualquier controlador de eventos adjunto con .on () o uno de sus métodos de acceso directo se activa cuando ocurre el evento correspondiente. Sin embargo, se pueden disparar manualmente con el método .trigger (). Una llamada a .trigger () ejecuta los controladores en el mismo orden en que estarían si el evento fuera activado naturalmente por el usuario

Por lo tanto, la mejor solución de una línea debería ser:

$('.selector_class').trigger('click');

//or

$('#foo').click();

1

  $("#gst_show>input").change(function(){

    var checked = $(this).is(":checked");
    if($("#gst_show>input:checkbox").attr("checked",checked)){
      alert('Checked Successfully');
    }

  });

— Raj Shekhar
fuente

2

PUEDE EXPLICAR SU CÓDIGO

— Yilmaz