Checkbox mit JavaScript aktivieren/deaktivieren

Wie kann ein Kontrollkästchen mit JavaScript aktiviert/deaktiviert werden?

Antwort #1

JavaScript:

// Check
document.getElementById("checkbox").checked = true;

// Uncheck
document.getElementById("checkbox").checked = false;

jQuery (1.6+):

// Check
$("#checkbox").prop("checked", true);

// Uncheck
$("#checkbox").prop("checked", false);

jQuery (1.5-):

// Check
$("#checkbox").attr("checked", true);

// Uncheck
$("#checkbox").attr("checked", false);

Antwort #2

Wichtiges Verhalten, das bisher noch nicht erwähnt wurde:

Das programmgesteuerte Setzen des checked-Attributs löst das change-Ereignis der Checkbox nicht aus.

Überzeugen Sie sich selbst in diesem Fiddle:
https://jsfiddle.net/fjaeger/L9z9t04p/4/

(Fiddle in Chrome 132, Firefox 135, Edge 132 und IE 11 getestet)

Die click()-Methode

Eines Tages könnten Sie feststellen, dass Sie Code schreiben, der davon abhängt, dass das Ereignis ausgelöst wird. Um sicherzustellen, dass das Ereignis ausgelöst wird, rufen Sie die click()-Methode des Kontrollkästchenelements auf, wie folgt:

document.getElementById('checkbox').click();

Dieses schaltet jedoch den angekreuzten Status des Kontrollkästchens um, anstatt ihn speziell auf true oder false zu setzen. Denken Sie daran, dass das change-Ereignis nur ausgelöst werden sollte, wenn sich das angekreuzte Attribut tatsächlich ändert.

Dies gilt auch für die jQuery-Methode: Das Setzen des Attributs mit prop oder attr löst das change-Ereignis nicht aus.

Setzen von checked auf einen bestimmten Wert

Sie könnten das checked-Attribut testen, bevor Sie die click()-Methode aufrufen. Beispiel:

function toggle(checked) {
  var elm = document.getElementById('checkbox');
  if (checked != elm.checked) {
    elm.click();
  }
}

Lesen Sie hier mehr über die Klick-Methode:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

Antwort #3

überprüfen:

document.getElementById("id-of-checkbox").checked = true;

abwählen:

document.getElementById("id-of-checkbox").checked = false;

Antwort #4

Wir können ein bestimmtes Kontrollkästchen markieren als,

$('id of the checkbox')[0].checked = true

und durch , deaktivieren

$('id of the checkbox')[0].checked = false

Antwort #5

Versuche dies:

//Check
document.getElementById('checkbox').setAttribute('checked', 'checked');

//UnCheck
document.getElementById('chk').removeAttribute('checked');

Antwort #6

Mit Vanilla JS:

//for one element: 
document.querySelector('.myCheckBox').checked = true  //will select the first matched element
document.querySelector('.myCheckBox').checked = false//will unselect the first matched element

//for multiple elements:
for (const checkbox of document.querySelectorAll('.myCheckBox')) {
//iterating over all matched elements

checkbox.checked = true //for selection
checkbox.checked = false //for unselection
}

Antwort #7

Beachten Sie, dass durch das Setzen des checked-Inhaltsattributs (im Gegensatz zum IDL-Attribut, das mit JavaScript gesetzt wird) auf einen nicht-leeren String das Kontrollkästchen aktiviert wird.

Wenn Sie also das Inhaltsattribut 'checked' auf "false" setzen, wird das Kontrollkästchen aktiviert. Ich musste den Wert auf die leere Zeichenkette, null oder den booleschen Wert false setzen, um sicherzustellen, dass das Kontrollkästchen nicht aktiviert ist.

Antwort #8

function setCheckboxValue(checkbox,value) {
    if (checkbox.checked!=value)
        checkbox.click();
}