Kontrollkästchen mit JavaScript markieren/entmarkieren

Question

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

Answer 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);

Answer 2

Ein wichtiges Verhalten, das noch nicht erwähnt wurde:

Programmatische Einstellung der geprüft Attribut, löst nicht die change Ereignis des Kontrollkästchens .

Überzeugen Sie sich selbst in dieser Geige:
http://jsfiddle.net/fjaeger/L9z9t04p/4/

(Fiddle getestet in Chrome 46, Firefox 41 und IE 11)

El click() méthode

Vielleicht schreiben Sie eines Tages einen Code, der sich darauf verlässt, dass das Ereignis ausgelöst wird. Um sicherzustellen, dass das Ereignis ausgelöst wird, rufen Sie die click() Methode des Checkbox-Elements, etwa so:

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

Dadurch wird jedoch der Status des Kontrollkästchens umgeschaltet, anstatt es speziell auf true o false . Denken Sie daran, dass die change Ereignis sollte nur dann ausgelöst werden, wenn sich das geprüfte Attribut tatsächlich ändert.

Dies gilt auch für die jQuery-Methode: Setzen des Attributs mit prop o attr schießt nicht die change Veranstaltung.

Einstellung checked auf einen bestimmten Wert

Sie könnten die checked Attribut, bevor der Aufruf der click() Methode. 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

Answer 3

Zu überprüfen:

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

zu deaktivieren:

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

Answer 4

Wir können ein partikuläres Kontrollkästchen ankreuzen als,

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

und deaktivieren durch ,

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

Answer 5

Versuchen Sie dies:

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

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