Kontrollkästchen mit JavaScript markieren/entmarkieren

Question

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

Answer 1

Wenn Sie aus irgendeinem Grund keine .click() auf das Kontrollkästchen-Element anwenden, können Sie seinen Wert einfach direkt über seine Eigenschaft .checked ändern (ein IDL-Attribut de <input type="checkbox"> ).

Hinweis dass dies nicht das normalerweise damit verbundene Ereignis auslöst ( ändern ), so dass Sie es manuell auslösen müssen, um eine vollständige Lösung zu haben, die mit allen zugehörigen Event-Handlern funktioniert.

Hier ist ein funktionales Beispiel 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 einen Eindruck davon bekommen, wie dies funktioniert.

Beachten Sie, dass ich document.querySelector für die Kürze / Einfachheit verwendet, aber dies könnte leicht ausgebaut werden, um entweder eine bestimmte ID an den Konstruktor übergeben, oder es könnte für alle Schaltflächen, die als Aria-Labels für ein Kontrollkästchen (beachten Sie, dass ich nicht die Mühe, eine ID auf der Schaltfläche und geben dem Kontrollkästchen ein Aria-Labelledby, die getan werden sollte, wenn mit dieser Methode) oder eine beliebige Anzahl von anderen Möglichkeiten, dies zu erweitern. Die letzten beiden addEventListener s sind nur zur Demonstration der Funktionsweise.

Answer 2

Ich stimme mit den aktuellen Antworten, aber in meinem Fall ist es nicht funktionieren, ich hoffe, dass dieser Code jemand in der Zukunft helfen:

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