Wie kann ein Kontrollkästchen mit JavaScript, jQuery oder Vanille aktiviert / deaktiviert werden?

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

Wichtiges Verhalten, das noch nicht erwähnt wurde:

Durch programmgesteuertes Festlegen des markierten Attributs wird das changeEreignis des Kontrollkästchens nicht ausgelöst .

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

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

Die click()Methode

Eines Tages schreiben Sie möglicherweise Code, der vom ausgelösten Ereignis abhängt. Rufen Sie die click()Methode des Kontrollkästchenelements wie folgt auf, um sicherzustellen, dass das Ereignis ausgelöst wird:

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

Dadurch wird jedoch der aktivierte Status des Kontrollkästchens umgeschaltet, anstatt es speziell auf trueoder zu setzen false. Denken Sie daran, dass das changeEreignis nur ausgelöst werden sollte, wenn sich das aktivierte Attribut tatsächlich ändert.

Dies gilt auch für die jQuery-Methode: Durch Festlegen des Attributs mit propoder attrwird das changeEreignis nicht ausgelöst.

Einstellung checkedauf einen bestimmten Wert

Sie können das checkedAttribut testen , bevor Sie die click()Methode aufrufen . Beispiel:

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

Weitere Informationen zur Klickmethode finden Sie hier:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

überprüfen:

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

zu deaktivieren:

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

Wir können ein Partikel-Kontrollkästchen wie folgt aktivieren:

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

und deaktivieren Sie durch,

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

Ich möchte darauf hinweisen, dass das Setzen des Attributs 'checked' auf eine nicht leere Zeichenfolge zu einem Kontrollkästchen führt.

Wenn Sie also das Attribut " Überprüft" auf "Falsch" setzen , wird das Kontrollkästchen aktiviert. Ich musste den Wert auf die leere Zeichenfolge null oder den booleschen Wert false setzen, um sicherzustellen, dass das Kontrollkästchen nicht aktiviert war.

Versuche dies:

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

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

<script type="text/javascript">
    $(document).ready(function () {
        $('.selecctall').click(function (event) {
            if (this.checked) {
                $('.checkbox1').each(function () {
                    this.checked = true;
                });
            } else {
                $('.checkbox1').each(function () {
                    this.checked = false;
                });
            }
        });

    });

</script>

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

Wenn Sie aus irgendeinem Grund kein .click()Checkbox-Element ausführen möchten (oder können) , können Sie den Wert einfach direkt über die Eigenschaft .checked (ein IDL-Attribut von) ändern<input type="checkbox"> ) .

Beachten Sie, dass dadurch das normalerweise verwandte Ereignis nicht ausgelöst wird ( Änderung ) nicht ausgelöst wird. Sie müssen es daher manuell auslösen, um eine vollständige Lösung zu erhalten, die mit allen verwandten Ereignishandlern funktioniert.

Hier ist ein Funktionsbeispiel in Roh-Javascript (ES6):

class ButtonCheck {
  constructor() {
    let ourCheckBox = null;
    this.ourCheckBox = document.querySelector('#checkboxID');

    let checkBoxButton = null;
    this.checkBoxButton = document.querySelector('#checkboxID+button[aria-label="checkboxID"]');

    let checkEvent = new Event('change');
    
    this.checkBoxButton.addEventListener('click', function() {
      let checkBox = this.ourCheckBox;

      //toggle the checkbox: invert its state!
      checkBox.checked = !checkBox.checked;

      //let other things know the checkbox changed
      checkBox.dispatchEvent(checkEvent);
    }.bind(this), true);

    this.eventHandler = function(e) {
      document.querySelector('.checkboxfeedback').insertAdjacentHTML('beforeend', '<br />Event occurred on checkbox! Type: ' + e.type + ' checkbox state now: ' + this.ourCheckBox.checked);

    }


    //demonstration: we will see change events regardless of whether the checkbox is clicked or the button

    this.ourCheckBox.addEventListener('change', function(e) {
      this.eventHandler(e);
    }.bind(this), true);

    //demonstration: if we bind a click handler only to the checkbox, we only see clicks from the checkbox

    this.ourCheckBox.addEventListener('click', function(e) {
      this.eventHandler(e);
    }.bind(this), true);


  }
}

var init = function() {
  const checkIt = new ButtonCheck();
}

if (document.readyState != 'loading') {
  init;
} else {
  document.addEventListener('DOMContentLoaded', init);
}

<input type="checkbox" id="checkboxID" />

<button aria-label="checkboxID">Change the checkbox!</button>

<div class="checkboxfeedback">No changes yet!</div>

Wenn Sie dies ausführen und sowohl auf das Kontrollkästchen als auch auf die Schaltfläche klicken, sollten Sie sich ein Bild davon machen, wie dies funktioniert.

Beachten Sie, dass ich der Kürze halber document.querySelector verwendet habe. Dies kann jedoch leicht so aufgebaut werden, dass entweder eine bestimmte ID an den Konstruktor übergeben wird, oder es kann auf alle Schaltflächen angewendet werden, die als Arienbezeichnungen für ein Kontrollkästchen dienen (beachten Sie, dass ich Ich habe mich nicht darum gekümmert, eine ID auf der Schaltfläche festzulegen und dem Kontrollkästchen eine Arie mit einem Etikett zu geben (was bei Verwendung dieser Methode erfolgen sollte) oder eine Reihe anderer Möglichkeiten, dies zu erweitern. Die letzten beiden addEventListenersind nur, um zu demonstrieren, wie es funktioniert.

Für eine einmalige Prüfung versuchen

myCheckBox.checked=1

<input type="checkbox" id="myCheckBox"> Call to her

für mehrere Versuche

document.querySelectorAll('.imChecked').forEach(c=> c.checked=1)

Buy wine: <input type="checkbox" class="imChecked"><br>
Play smooth-jazz music: <input type="checkbox"><br>
Shave: <input type="checkbox" class="imChecked"><br>

Ich stimme den aktuellen Antworten zu, aber in meinem Fall funktioniert es nicht. Ich hoffe, dieser Code hilft jemandem in der Zukunft:

// check
$('#checkbox_id').click()