Wie kann ein Checkbox-Klickereignis ausgelöst werden, auch wenn es über Javascript-Code aktiviert ist?

80

Ich habe viele Kontrollkästchen auf meiner Seite und es gibt ein Kontrollkästchen Alle auswählen, das alle Kontrollkästchen aktiviert. Irgendwie möchte ich dieses Klickereignis des Kontrollkästchens emulieren, auch wenn es über die Schaltfläche Alle auswählen aktiviert / deaktiviert ist. Wie kann ich es tun?

— Jishnu AP
quelle

117

Sie können die jQuery- .trigger()Methode verwenden. Siehe http://api.jquery.com/trigger/

Z.B:

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

— Mark Robinson
quelle

13

Sie können auch einfach anrufen $('#foo').click(), was effektiv dasselbe tut.

— Kevin Babcock

2

Wie geht das mit reinem JavaScript?

— Paul

6

erscheint trigger('click')schaltet den aktuellen Wert um. Wenn Sie es einfach setzen und dann checkedauf true setzen möchten, rufen Sie triggerHandler (...) stackoverflow.com/questions/10268222/…

— rogerdpack

1

Wie genau werden solche Beiträge als korrekt markiert, wenn sie die Verwendung eines Drittanbieters erfordern? Er hat nicht nach einer jQuery-Lösung gefragt.

— Wancieho

@Wancieho Die Frage ist mit 'jquery' markiert.

— Mark Robinson

15

Prüfstatus abrufen

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

Dann zum Einstellen

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

— Harish
quelle

9

Ich habe es nicht so ausprobiert, attrwie ich es propheutzutage benutze , aber diese Methode

— aktiviert

9

Sie können auch die .change()Funktion verwenden

Z.B:

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

— silviomoreto
quelle

Dies funktioniert bei mir nicht, wenn die Änderung des Kontrollkästchens über Javascript erfolgt.

— Flimm

6

keine gQuery

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

Ich habe bestimmte Klassen für meine Kontrollkästchen verwendet.

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
quelle

6

Sie können dies auch verwenden, ich hoffe, Sie können ihnen dienen.

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

Erweitern Sie das Snippet

— Lernen und teilen
quelle

4

Die Triggerfunktion von jQuery könnte Ihre Antwort sein.

In jQuery-Dokumenten heißt es: Alle mit .on () oder einer seiner Verknüpfungsmethoden verknüpften Ereignishandler werden ausgelöst, wenn das entsprechende Ereignis auftritt. Sie können jedoch manuell mit der Methode .trigger () ausgelöst werden. Ein Aufruf von .trigger () führt die Handler in derselben Reihenfolge aus, in der sie wären, wenn das Ereignis vom Benutzer auf natürliche Weise ausgelöst würde

Daher sollte die beste einzeilige Lösung sein:

$('.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
quelle

2

Können Sie Ihren Code erklären

— Yilmaz