Ankreuzfeld mit JavaScript aktivieren/deaktivieren?

Wichtiges Verhalten, das noch nicht erwähnt wurde:

Programmgesteuertes Setzen des Attributs geprüft löst das change-Ereignis des Kontrollkästchens nicht aus.

Ü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 werden Sie vielleicht Code schreiben, der sich auf das ausgelöste Ereignis stützt. Um sicherzustellen, dass das Ereignis ausgelöst wird, rufen Sie die click()-Methode des Checkbox-Elements wie folgt auf:

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

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

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

checked auf einen bestimmten Wert setzen

Sie können 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 Klickmethode:
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;

Ich möchte darauf hinweisen, dass das Setzen des Attributs 'checked' auf einen nicht leeren String zu einem markierten Kästchen führt. 

Wenn Sie also das Attribut 'checked' auf"false"setzen, wird das Kontrollkästchen aktiviert. Ich musste den Wert auf die leere Zeichenfolgenulloder den booleschen Wertfalsesetzen, um sicherzustellen, dass das Kontrollkästchen nicht markiert ist.

Wir können ein Partikel-Kontrollkästchen wie

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

und deaktivieren Sie durch,

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

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 ein .click() auf dem Kontrollkästchenelement nicht ausführen möchten (oder nicht), können Sie den Wert einfach über die .checked-Eigenschaft (ein IDL-Attribut von <input type="checkbox"> ).

Beachten Sie, dass das normalerweise verwandte Ereignis ( change ) nicht ausgelöst wird. Sie müssen es daher manuell auslösen, um eine vollständige Lösung zu erhalten, die mit allen zugehörigen Event-Handlern funktioniert.

Hier ist ein Funktionsbeispiel in rohem 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 auf das Kontrollkästchen und die Schaltfläche klicken, sollten Sie wissen, wie dies funktioniert.

Beachten Sie, dass ich document.querySelector aus Gründen der Kürze/Einfachheit verwendet habe, dies könnte jedoch leicht so gestaltet werden, dass entweder eine gegebene ID an den Konstruktor übergeben wird oder dass es sich auf alle Schaltflächen bezieht, die als Beschriftung für ein Kontrollkästchen dienen (beachten Sie, dass ich Sie haben sich nicht die Mühe gemacht, eine ID auf der Schaltfläche zu setzen und dem Kontrollkästchen ein Aria-Label zuzuweisen (dies sollte geschehen, wenn Sie diese Methode verwenden) oder eine Reihe anderer Möglichkeiten, dies zu erweitern. Die letzten beiden addEventListeners sollen nur zeigen, wie es funktioniert.